Infineon Design System Stencil Web Components (MVP)
Table of Contents
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 implementation of Infineons Digital Design System and it's Storybook sourcecode using Stencil web components.
Use it to build & run storybook and distribute the Stencil web components.
Built With
Example applications demonstrating the usage of IFX Web Components
Project structure
Overall structure
The repository has a monorepo architecture using Lerna. It contains not only our Stencil Web Components, but also framework integrations for Vue and React as well as example applications demonstrating component usage (not included in the Lerna workspaces)
Wrapper components
Stencil Web Components can be used with any JavaScript framework or with no framework at all, just like any other HTML elements. This is because they are built on Web APIs that are native to the browser. They are self-contained and encapsulate their functionality in a way that makes them portable and easy to drop into any project.
To bridge the gap between Stencil components and specific frameworks, it can be useful to create wrapper components
A Stencil Wrapper Component is a component that wraps around a Stencil Web Component and translates the properties, events, and methods to work seamlessly within the specific framework context.
Our Wrapper Components are built automatically every time npm run stencil:build is executed.
Getting Started
Prerequisites
Installation of the component libraray
Angular
1.
- with NPM
npm install --save @infineon/infineon-design-system-stencil
- with Yarn
yarn add @infineon/infineon-design-system-stencil
2. Installation of SASS
npm install sass3. Import the module inside your entry point file
#main.ts
import { defineCustomElements } from "@infineon/infineon-design-system-stencil/loader";
defineCustomElements(window);4. Additional steps only for Angular
Inside app.modules.ts file:
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
...
schemas: [
CUSTOM_ELEMENTS_SCHEMA
],
...
})React
React Wrappers: Similarly to Vue, a React wrapper provides a React interface to a Stencil web component, making the web component feel more like a typical React component. This includes proper handling of props, state, and events within the context of a React application.
1. Installation
- with NPM
npm install @infineon/infineon-design-system-react
- with Yarn
yarn add @infineon/infineon-design-system-react
2. Installation of SASS
npm install sass3. Import the module inside your entry point file
import { defineCustomElements } from '@infineon/infineon-design-system-react';
//...
defineCustomElements(window)In React, there isn't a built-in mechanism to globally register components like in Vue. Therefore, components need to be imported in the file that they are being used in.
4. Usage
import { IfxProgressBar, IfxSearchBar, IfxButton } from '@infineon/infineon-design-system-react';
//...
<IfxSearchBar onIfxChange={handleSearch} show-close-button="true"></IfxSearchBar>React + Javascript specific
It may be necessary to add the following to your .env file at project root:
GENERATE_SOURCEMAP=false
This can also be achieved by updating your start script in the package.json accordingly.
Vanilla
Include the following script tag in your index.html
<script type="module" src="https://cdn.jsdelivr.net/npm/@infineon/infineon-design-system-stencil/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js"></script>'
Vue
1. Installation
- with NPM
npm install @infineon/infineon-design-system-vue
- with Yarn
yarn add @infineon/infineon-design-system-vue
2. Installation of SASS
npm install sass3. Import the module inside your entry point file
//main.js/main.ts
import { ComponentLibrary } from '@infineon/infineon-design-system-vue';
//...
createApp(App).use(ComponentLibrary).mount('#app');In Vue, this registers the components globally.
4. Usage
<ifx-progress-bar v-model="progress" size="m" show-label="true"></ifx-progress-bar>General usage of IFX web components
Explore our currently available web components in Storybook. You will also find the code snippets needed to include them in your application.
https://infineon.github.io/infineon-design-system-stencil
Using only the Icons
For the case in which you only want to use our icons, please follow these steps:
- install the package by following the instructions for the respective framework
- Import only the ifx-icon component inside your entry point file as explained below;
For React: index.js/index.ts
For Vue: main.js/main.ts
For Angular: main.ts
import { defineCustomElement as defineCustomElementIfxIcon } from "@infineon/infineon-design-system-stencil/dist/components/ifx-icon";
defineCustomElementIfxIcon(window);Local development
Installation
git clone https://github.com/Infineon/infineon-design-system-stencil.gitInstall all the modules and dependencies listed on the package.json file with:
yarn/npm installBuild Storybook
To run Storybook to view and test our Stencil Web Components, we first need to export it as a static web app.
For building the application for the first time (to load fonts, assets and stylesheets) run:
yarn/npm run build:componentsStart Storybook
To run storybook locally (automatically rebuilds on changes), run:
yarn/npm run storybookExample applications
To test the standard Stencil components within our example applicatons, navigate to
cd examples/stencil-componentsand go to the folder for Vue, React, Angular or VanillaJs. Follow the instructions described in the readme.md in each of these folders.
To test the Wrapper components within React or Vue applicatons, navigate to
cd examples/wrapper-componentsand go to the application folder you want to use for testing. (React-Ts, React-Js, Vue-Ts, Vue-Js). Again, follow the instructions described in the readme.md in each of these folders.
Contributing
- Clone the repository
- Create an issue with a proper description (Naming convention: 'name-of-component: feature/bug')
- Create a pull request with a proper description
- Request a review (tishoyanchev || verena-ifx)
Contact
dds@infineon.com