Infineon Design System Bootstrap Components

About The Project

As part of the Infineon brand guidelines, the Infineon Digital Design System supports designers, developers and project managers to build user interfaces faster and better – with the ultimate goal to create a coherent and optimal user journey across all internal and external Infineon digital touchpoints.

This repository contains an Bootstrap implementation of Infineons Digital Design System and it's Storybook sourcecode.

Use it to build & run storybook and distribute the Bootstrap SCSS.

Requirements

• Node >= v14 – if you have nvm installed, you can just run nvm use to select the right node version.
• Yarn >= 1.22.10 or npm >= 6.14.13

Usage

Add this to your dependencies in package.json:

npm install --save @infineon/design-system-bootstrap

yarn add @infineon/design-system-bootstrap

Now you can import the assets you need to consume. This currently includes:

├── fonts
│   └── source-sans-pro-v18-latin
│       ├── source-sans-pro-v18-latin-600.woff
│       ├── source-sans-pro-v18-latin-600.woff2
│       ├── source-sans-pro-v18-latin-700.woff
│       ├── source-sans-pro-v18-latin-700.woff2
│       ├── source-sans-pro-v18-latin-regular.woff
│       └── source-sans-pro-v18-latin-regular.woff2
├── index.css
├── index.js
└── Logo.svg

Include / import index.css to get the correct style for markup copied from Storybook. You'll additionally have to copy the font assets (fonts/) themselves to your publicly available root folder (often times it's called static/ or public/).

An import could, depending on your local setup, for example look like this:

CSS:

@import "./node_modules/@infineon/design-system-bootstrap/dist/index.css";

To get the correct behaviour for the components, you'll additionally need to include the provided JavaScript, too:

JavaScript:

import "@infineon/design-system-bootstrap/dist/index.js";

FontAwesome Pro

As this project uses FontAwesome Pro you need to add your FontAwesome Pro key to your project. If you are an Infineon Employee you can obtain one by emailing [email protected].

See https://fontawesome.com/docs/web/setup/packages#_1-configure-access on how to configure your project.

Local Development

Installation

This project itself is developed with yarn.
Install all needed dependencies with:

yarn install

Start Storybook

Start Storybook in local dev mode, including file watchers to hot-reload on code change:

yarn start

Build Storybook

Build the static Storybook, ready to be hosted / deployed.
Result gets added in storybook-static/:

yarn build-storybook

Bundle

Generate a bundle that can be published on npm, adds result in dist/ folder:

yarn bundle

The resulting bundle is meant to be used like described in the beginning of this readme, as a drop-in to immediately enable usage of Infineon developed Bootstrap components.

Bundle Sources

Generate a bundle that can be published on npm, adds result in dist-sources/ folder:

yarn package

The resulting bundle is meant to be used in projects that need to consume sources directly. Import the needed component in your code like this (e.g.):

General Theme:

SCSS:

@import "@infineon/design-system-bootstrap/dist-sources/src/bootstrap-theme.scss"

JavaScript:

import "@infineon/design-system-bootstrap/dist-sources/src/index.js"

Specific Component (Button):

SCSS:

@import "@infineon/design-system-bootstrap/dist-sources/src/button/button"