How to download & integration

When you finish reading this documentation, you know how to integration the Style Guide into your project.

Download

You can download the Style Guide into your project via npm.

Download via npm (recommended)

You need access to the Azure Artifactory. Add a .npmrc file to the root of your project with the following content.

@finanzen-net:registry=https://pkgs.dev.azure.com/finanzennet/finando/_packaging/finanzen-net/npm/registry/
always-auth=true

Now you need to login to Azure Artifactory via npm. To do this, you have to install vsts-npm-auth** once and log in with your azure credentials it:

Install the vsts-npm-auth only once with npm install -g vsts-npm-auth --registry https://registry.npmjs.com --always-auth false
To login to Azure DevOps run vsts-npm-auth -config .npmrc -F. A login window will open, you must use your name@finanzen.net account.

NOTE Microsoft automatically logs a user out after a few months, so you have to repeat step two regularly. If you have been logged out, you will receive a login error message from npm when trying to access the Artifactory.

Then install the Style Guide package @finanzen-net/common-styles.

npm install @finanzen-net/common-styles

Download direct from Azure Artifactory

If you cannot use npm, you also have the option of downloading the style guide directly and integrating it into your project.

To do this, open the Artifactory, search for @finanzen-net/common-styles, select the desired version of the style guide and download it directly using the download button.

Azure Artifactory Download

Integration

You can integrate the Style Guide into your project.

Include via bundle (recommended)

Alternatively, the Style Guide can also be integrated into your own bundles. The following example shows how to integrate JavaScript in your bundle process.

// include Style Guide class
import { StyleGuide } from '@finanzen-net/common-styles/dist/style-guide/script-default';

// get the current instance (it is a singelton)
const styleGuide = StyleGuide.Instance;

// published the the instance in the window reference
window.StyleGuide = window.StyleGuide || StyleGuide;
window.styleGuide = window.styleGuide || styleGuide;

// example how to access to one of the components
document.getElementById('something').addEventListener('click', () => {
  styleGuide.sidePanelHandler.closeAll();
});

The next example shows how to integrate the CSS Stylesheet in your bundle process (this shows a SCSS file).

// include Markets Insider Style Guide Stylesheet
@import 'node_modules/@finanzen-net/common-styles/dist/style-guide/style-default.css';

// override something as example
.side-panel {
  width: 30rem;
}

Include directly in HTML

The Style Guide is integrated on a HTML page as the following example shows. It is strongly recommended to include the JavaScript file with the defer attribute.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Your Project</title>

    <!-- Stylesheet -->
    <link rel="stylesheet" type="text/css" href="~/node_modules/@finanzen-net/common-styles/dist/style-guide/style-default.css" />

    <!-- JavaScript -->
    <script src="~/node_modules/@finanzen-net/common-styles/dist/style-guide/script-default.js" defer></script>
  </head>
  <body>
    <button class="button">Hello World</button>
  </body>
</html>