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/

Your credentials for the Azure Artifactory come from the dev-tools setup script. It signs you in once and writes them to your user .npmrc, never to the project. When they expire, npm reports an authentication error; run the setup script again. More: Feed access.

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>