How to use

Artifactory

Ready to use, released version of the FROK is published in the BDC Artifactory. The npm packages can be found under following url:

In production we recommend to use only released version. The snapshot versions can be used only for testing purpose.

The last version recommended by us is 3.8.0

As a login to the BDC Artifactory please use your Bosch NT user and as a password please use Artifactory API Key. The API key can be found in settings of your profile in the Artifactory UI. https://artifactory.boschdevcloud.com/

Artifactory Login Window

If you don't have an access, please use the IDM self service to assign the role IDM2BCD_BDC_Artifactory_01_perm74_reader for the application Bosch Development Cloud.

IDM - Manage IT roles

IDM - Choose application

IDM - Search role

In case you have any trouble logging on, please write to Michal Piasecki CI/DAD13

Files

The distribution package of the FROK contains the following files:

  • frontend-kit.css: css file containg all syles of the FROK components
  • frontend-kit.js: contains javascript code of the FROK components
  • font files (boschsans*, bosch_icon*) - bosch font files

Configuration

The configuration of the FROK is straightforward. Please do the following steps to configure the FROK in your project:

  • the npm package of the FroK is stored in BDC Artifactory. To be able to use it, please add the following configuration to your .npmrc file. The configuration can be found as well on Artifactory website under "Set Me Up" button. As a SCOPE please use "@bosch".
Artifactory Set Up NPM Client

Artifactory Set Up NPM Client
  • add reference to @bosch/frontend.kit-npm@3.8.0 package in dependency section of your package.json file and run npm install. This will download frontend-kit packages to your node_modules directory.
{
      "name": "frontend-kit-consumer",
      "version": "2.0.0",
      "description": "",
      "main": "index.js",
      "author": "",
      "dependencies": {
          "@bosch/frontend.kit-npm": "^3.8.0"
      }
}
  • if your project doesn't use npm, please download FROK distribution from the website and add it to your project source code.
  • please reference frontend-kit.js and frontend-kit.css file somewhere in your project. In most case it will be root file of your project like index.html. 
    <script src="node_modules/@bosch/frontend.kit-npm/dist/frontend-kit.js"></script>
    <link
  href="node_modules/@bosch/frontend.kit-npm/dist/frontend-kit.css"
  rel="stylesheet"
/>
<!DOCTYPE html>
<html>
<head>
  <title>Exmaple usage of the FROK</title>
  <link href="node_modules/@bosch/frontend.kit-npm/dist/frontend-kit.css" rel="stylesheet" />
</head>
<body>
    <script src="node_modules/@bosch/frontend.kit-npm/dist/frontend-kit.js"></script>
</body>
</html>
  • copy a markup of the selected component from the preview server. To sign in to the preview server, please use the following credentials: login/password: bosch/uneo2019 e.g. to use FROK button component in primary variant please go to: https://frok.ui.bosch.tech/atoms/button/guide and copy the following markup into your project:
<button type="button" class="a-button a-button--primary -without-icon">
  <div class="a-button__label">Button label</div>
</button>

License

Copyrights 2020-2022 Robert Bosch GmbH All rights reserved.

Contact

Michal Piasecki CI/PDX1