removes dependencies and integrates fundamentals via npm

.env

@@ -0,0 +1,3 @@
+VUE_APP_FD_VUE_DEV_TOOLS=disabled
+VUE_APP_FD_NAME=Fundamental Vue
+VUE_APP_VERSION=0.0.1-beta

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Contributing to Fundamental-vue
+# Contributing to Fundamental Vue
 
 We're excited that you're interested in contributing to Fundamental-vue! Your contribution can make this library even better. Please read the guidelines regarding contributions:
 
@@ -56,7 +56,7 @@ Status of closed issues:
 
 ## Contribute Code
 
-You are welcome to contribute code to Fundamental-vue in order to fix issues or to add new features.
+You are welcome to contribute code to Fundamental Vue in order to fix issues or to add new features.
 
 There are three important things to consider:
 
@@ -93,12 +93,12 @@ You must follow the coding style as best you can when submitting code. Take note
 ### How to contribute - the Process
 
 1.  Make sure the issue you've filed in the [issue tracker] has the label "contribution welcome" - otherwise, it is not ready to be worked on.
-2.  Fork the Fundamental-vue repository to your GitHub account.
+2.  Fork the Fundamental Vue repository to your GitHub account.
 3.  Create a branch for your issue or feature, and commit or push your changes on that branch.
 4.  Create a Pull Request from your forked repository to github.com/SAP/fundamental-vue. In the subject of the pull request, briefly describe the bug fix or enhancement you're contributing. In the pull request description, please provide a link to the issue in the issue tracker.
 5.  Follow the link posted by the CLA assistant to your pull request and accept it, as described above.
 6.  Wait for our code review and approval. We may ask you for additional commits, or make changes to your pull request ourselves.
-    -   Note that the Fundamental-vue developers also have their regular duties so, depending on the required effort for reviewing, testing, and clarification, this may take a while.
+    -   Note that the Fundamental Vue developers also have their regular duties so, depending on the required effort for reviewing, testing, and clarification, this may take a while.
 7.  Once the change has been approved, we inform you in a comment.
 8.  Your pull request cannot be merged directly into the branch (internal SAP processes), but is merged internally and immediately appears in the public repository as well.
 9. We close the pull request. You can then delete the now obsolete branch.

README.md

@@ -1,4 +1,4 @@
-# fundamental-vue
+# Fundamental Vue
 Vue.JS components for [SAP Fiori Fundamentals](https://github.com/SAP/fundamental)
 
 - [Playground](https://dist-gjxmmg5hv.now.sh)
@@ -28,7 +28,7 @@ $ npm pack
 ## Install
 
 To download and use this library, you first need to install the node package manager - [npm](https://www.npmjs.com/get-npm).
- 
+
 1. Install Fundamental Vue
 ```
 $ npm install --save fundamental-vue
@@ -45,7 +45,7 @@ Vue.use(FundamentalVue);
 // ...
 ```
 
-Fundamental Vue does not include the ['Fiori Fundamentals' library](https://github.com/SAP/fundamental) which is required for styling. 
+Fundamental Vue does not include the ['Fiori Fundamentals' library](https://github.com/SAP/fundamental) which is required for styling.
 
 
 2. Install Fiori Fundamentals
@@ -68,9 +68,9 @@ The following assumes the usage of a module bundler such as [webpack](https://we
 $ npm install sass-loader node-sass --save-dev
 ```
 
-Loading the SCSS and running your project at this point will result in errors relating to the path configuration for icons and fonts. This is a [known issue](https://github.com/SAP/fundamental#known-issues). 
+Loading the SCSS and running your project at this point will result in errors relating to the path configuration for icons and fonts. This is a [known issue](https://github.com/SAP/fundamental#known-issues).
 
-To rectify this, start by creating a new directory ('scss') in your project's `src`. Within this directory, create a main SCSS file ('main.scss') from which to manage your imports, configurations and customisations. 
+To rectify this, start by creating a new directory ('scss') in your project's `src`. Within this directory, create a main SCSS file ('main.scss') from which to manage your imports, configurations and customisations.
 
 Add the following to the main SCSS file:
 ```
@@ -114,7 +114,6 @@ If you encounter an issue, you can [create a ticket](https://github.com/SAP/fund
 
 ## Contributing
 
-If you want to contribute, please check the [CONTRIBUTING.md](./CONTRIBUTING.md) documentation for contribution guidelines.
 
 ## License
 

package.json

@@ -2,7 +2,7 @@
     "name": "fundamental-vue",
     "version": "0.0.1-beta",
     "private": true,
-    "homepage": "https://github.wdf.sap.corp/hybris-pd/fundamental-vue",
+    "homepage": "https://github.com/SAP/fundamental-vue",
     "scripts": {
         "serve:docs": "vue-cli-service serve src/docs/main.ts",
         "serve": "vue-cli-service serve",
@@ -15,15 +15,13 @@
     },
     "main": "dist/fundamentalvue.umd.js",
     "dependencies": {
+        "fiori-fundamentals": "^1.4.0",
         "vue": "^2.5.17",
         "vue-class-component": "^6.3.2",
         "vue-property-decorator": "^7.2.0",
         "vue-router": "^3.0.1"
     },
     "devDependencies": {
-        "vuex": "^3.0.1",
-        "markdown-loader": "^4.0.0",
-        "highlight.js": "^9.13.1",
         "@babel/plugin-proposal-class-properties": "^7.1.0",
         "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
         "@babel/preset-env": "^7.1.6",
@@ -35,15 +33,18 @@
         "@vue/cli-service": "^3.1.4",
         "@vue/test-utils": "^1.0.0-beta.25",
         "babel-core": "7.0.0-bridge.0",
+        "highlight.js": "^9.13.1",
         "html-loader": "^1.0.0-alpha.0",
+        "markdown-loader": "^4.0.0",
         "node-sass": "^4.11.0",
         "raw-loader": "^1.0.0-beta.0",
         "sass-loader": "^7.1.0",
         "ts-jest": "^23.10.5",
         "tslint": "^5.11.0",
         "tslint-react": "^3.6.0",
-        "typescript": "^3.3.0-dev.20181122",
+        "typescript": "^3.1.0",
         "vue-gh-pages": "^1.19.0",
-        "vue-template-compiler": "^2.5.17"
+        "vue-template-compiler": "^2.5.17",
+        "vuex": "^3.0.1"
     }
 }

public/index.html

@@ -6,10 +6,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-  <title>fundamental-vue</title>
-  <link href="//unpkg.com/fiori-fundamentals@1.4.0/dist/fiori-fundamentals.min.css" rel="stylesheet">
-  <link href="//unpkg.com/fiori-fundamentals@1.4.0/dist/fonts.min.css" rel="stylesheet">
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
+  <title>Fundamental Vue</title>
 </head>
 
 <body>

src/components/index.ts

@@ -59,6 +59,7 @@ import * as Layout from './Layout';
 import * as Tile from './Tile';
 import * as TileGrid from './TileGrid';
 import * as SearchInput from './SearchInput';
+import { version, libName } from '@/config';
 
 export const all = {
     Token,
@@ -99,9 +100,8 @@ const $plugin: Plugin = () => {
                 const comp = all[name];
                 api.registerComponent(vue, comp, name);
             }
-            const version = '0.0.1';
             console.log(
-                `%c Welcome to fundamental-vue %c Detected v${version} %c`,
+                `%c Welcome to ${libName} %c Detected v${version} %c`,
                 'background:#35495e ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff',
                 'background:#1661be ; padding: 1px; border-radius: 0 3px 3px 0;  color: #fff',
                 'background:transparent',

src/config.ts

@@ -0,0 +1,9 @@
+const {
+  VUE_APP_FD_VUE_DEV_TOOLS,
+  VUE_APP_FD_NAME,
+  VUE_APP_VERSION,
+} = process.env;
+
+export const devToolsEnabled = VUE_APP_FD_VUE_DEV_TOOLS === 'enabled';
+export const libName = (VUE_APP_FD_NAME as string) || '<name not set>';
+export const version = VUE_APP_VERSION as string;

src/docs/components/ComponentExample/ComponentExample.tsx

@@ -59,7 +59,6 @@ export class ComponentExample extends TsxComponent<Props> {
   private codeShown = false;
   public render() {
     const buttonTitle = this.codeShown ? 'Hide Code' : 'Show Code';
-    const iconClass = this.codeShown ? 'fas fa-caret-up' : 'fas fa-caret-down';
     const renderCodeIfNeeded = () => {
       const backgroundColor = 'rgb(250, 250, 250) !important';
       const style = {
@@ -141,7 +140,7 @@ export class ComponentExample extends TsxComponent<Props> {
               on-click={event => this.toggleCode(event)}
             >
               <a href='#'>
-                <i class={iconClass} />
+                <i class={`sap-icon--navigation-${this.codeShown ? 'up' : 'down'}-arrow sap-icon--s`} />
                 <span style='margin-left: 4px; line-height: 44px; font-size: 13px;'>{buttonTitle}</span>
               </a>
             </div>

src/docs/components/index.ts

@@ -21,7 +21,6 @@ export const registerComponents = (vue: VueConstructor) => {
   all.forEach(component => {
     // @ts-ignore
     const name = component.options.name;
-    console.info('Register Docs Component: %s', name);
     vue.component(name, component);
   });
 };

src/docs/layouts/DefaultLayout.tsx

@@ -102,8 +102,6 @@ export class DefaultLayout extends Vue {
       return collections.map(renderExampleCollection);
     };
 
-    // @ts-ignore
-    const VueDevToolsEnabled = this.$$VueDevToolsEnabled || false;
     const renderSideNav = () => {
       return (
         <SideNav
@@ -133,7 +131,7 @@ export class DefaultLayout extends Vue {
           <ShellBar>
             <ShellBarGroup position='start'>
               <ShellBarLogo src='/logo.png' srcset='/logo.png 1x, /logo@2x.png 2x' />
-              <ShellBarProduct>Fundamental-Vue</ShellBarProduct>
+              <ShellBarProduct>Fundamental Vue</ShellBarProduct>
             </ShellBarGroup>
             <ShellBarGroup position='end'>
               <ShellBarActions>

src/docs/main.scss

@@ -0,0 +1,5 @@
+$fd-icons-path : "../../node_modules/fiori-fundamentals/scss/icons/"; // should be declared before the scss import
+
+$fd-scss-font-path : "../../node_modules/fiori-fundamentals/scss/fonts/";
+
+@import "../../node_modules/fiori-fundamentals/scss/all.scss";

src/docs/main.ts

@@ -1,4 +1,5 @@
 import './class-component-hooks';
+import './main.scss';
 import Vue from 'vue';
 Vue.config.productionTip = false;
 import FundamentalVue from '@/index';
@@ -23,7 +24,6 @@ Vue.use(Router);
 // Create Store + misc
 const store = new Vuex.Store({});
 registerComponents(Vue);
-Vue.prototype.$$VueDevToolsEnabled = process.env.VUE_APP_FD_VUE_DEV_TOOLS === 'enabled';
 
 new Vue({
   components: { App },

src/docs/static-pages/start.md

@@ -1,16 +1,79 @@
 # Introduction
 
-> SAP Fundamental-Vue is a UI framework based on [SAP Fiori Fundamentals](https://sap.github.io/fundamental/) and [Vue.js](htts://vuejs.org).
+> SAP Fundamental Vue is a UI framework based on [SAP Fiori Fundamentals](https://sap.github.io/fundamental/) and [Vue.js](htts://vuejs.org).
 
 ## Installation
-There are two ways to install SAP Fundamental-Vue.
+Install Fundamental Vue via **NPM**:
 
-### Via **NPM**
-_todo_
+```bash
+npm install --save fundamental-vue
+```
 
-### Via **unpkg**
-_todo_
+## Usage
 
-## Changelog
+After installing, you will need to import `fundamental-vue` and make it available to your Vue application. These instructions assume the usage of Vue CLI to scaffold your project.
 
-* Nothing has changed - yet.
+In your project's `main.js`:
+
+```
+// ...
+import FundamentalVue from 'fundamental-vue';
+Vue.use(FundamentalVue);
+// ...
+```
+
+Fundamental Vue does not include the ['Fiori Fundamentals' library](https://github.com/SAP/fundamental) which is required for styling.
+
+## Install Fiori Fundamentals
+The quickest way to get Fiori Fundamentals styling for your components is  to include the compiled and minified Fiori Fundamentals CSS library with the following CDN link in your public `index.html` file:
+```
+<link rel="stylesheet" type="text/css" href="https://unpkg.com/fiori-fundamentals@1.3.3/dist/fiori-fundamentals.min.css">
+```
+
+However, installing the Fiori Fundamentals library with npm (recommended) will give you the flexibility to use individual components and enable [advanced customisation options](https://github.com/SAP/fundamental/wiki/Advanced-Customization). In this case, you do not need the CDN link as this method uses the SASS/SCSS source.
+
+To install the Fiori Fundamentals SASS/SCSS source:
+```
+$ npm install --save fiori-fundamentals
+```
+
+The following assumes the usage of a module bundler such as [webpack](https://webpack.js.org/). To compile Fiori Fundamentals SASS/SCSS to CSS, two additional packages are required for your bundling process - [sass-loader](https://github.com/webpack-contrib/sass-loader) and [node-sass](https://github.com/sass/node-sass). To install these packages as development dependencies:
+
+```
+$ npm install sass-loader node-sass --save-dev
+```
+
+Loading the SCSS and running your project at this point will result in errors relating to the path configuration for icons and fonts. This is a [known issue](https://github.com/SAP/fundamental#known-issues).
+
+To rectify this, start by creating a new directory ('scss') in your project's `src`. Within this directory, create a main SCSS file ('main.scss') from which to manage your imports, configurations and customisations.
+
+Add the following to the main SCSS file:
+```
+$fd-icons-path : "../node_modules/fiori-fundamentals/scss/icons/"; // should be declared before the scss import
+
+$fd-scss-font-path : "../node_modules/fiori-fundamentals/scss/fonts/";
+
+@import "../node_modules/fiori-fundamentals/scss/all.scss";
+```
+
+Import the main SCSS file in your `App.js` style block to add Fiori Fundamentals styles to your project.
+
+```
+<style lang='scss'>
+...
+@import "./scss/main.scss";
+...
+</style>
+```
+
+You can now use the [Playground](https://dist-4d2gqwr8y.now.sh/#/start) to browse the components currently available with Fundamental Vue.
+
+To use a Fundamental Vue component, paste the desired code snippet from the Playground and configure it as necessarry:
+
+```
+...
+<FdAlert dismissible>
+      Happy building! 🚀
+</FdAlert>
+...
+```