Skip to content

verena-ifx/Infineon-Design-System-Bootstrap

 
 

Repository files navigation

Infineon Design System Bootstrap Components

GitHub Repo Issues GitHub Pull Requests GitHub Repo Version GitHub Master Branch Weekly Commits GitHub Repo Contributors GitHub Repo Discussions

Table of Contents
  1. About The Project
  2. Getting Started
  3. Usage
  4. Local Development
  5. Contact

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.

Built With

  • React
  • Bootstrap

back to top

Getting Started

Prerequisites

  • Node v14 or older.
  • Yarn v1.22.10 or older, or Npm v6.14.13 or older.

Installation on React, Vue or Angular

With NPM

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

With Yarn

  1. yarn add @infineon/design-system-bootstrap

Add to main.js

import "@infineon/design-system-bootstrap";

Installation Fontawesome

  1. Send an email to [email protected] to get the fontawesome token key. Then execute these two commands:
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" <PASTE KEY HERE>

Additional Fontawesome installation instructions can be found here:

For Angular: https://fontawesome.com/v5/docs/web/use-with/angular
For Vue https://fontawesome.com/v6/docs/web/use-with/vue/
For React: https://fontawesome.com/v6/docs/web/use-with/react/

back to top

Usage

Explore our components in Storybook.

https://storybook-bootstrap.icp.infineon.com

back to top

Local Development

Installation

Install all the modules and dependencies listed on the package.json file with:

yarn install

or

npm install

Build Storybook

To deploy Storybook, we first need to export it as a static web app. To do so, we can use the inbuild build-storybook command with npm or yarn.

yarn build-storybook

or

npm build-storybook

This will generate a static Storybook in the storybook-static directory.

Start Storybook

To start storybook, simply run the inbuild command start-storybook with npm or yarn.

yarn start-storybook

or

npm start-storybook

start-storybook also executes watch-css and watch-storybook which automatically update storybook on code change.

back to top

Contact

WebEx

Yanchev Tihomir
Werther Kai

Email

[email protected]
[email protected]

back to top

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 72.3%
  • SCSS 27.6%
  • Other 0.1%