Skip to content

Infineon/infineon-design-system-stencil

Repository files navigation

Infineon Design System Stencil Web Components (MVP)

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. Project structure
  3. Getting Started
  4. Usage
  5. Local development
  6. Contributing
  7. 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 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

Stencil web components

Example applications demonstrating the usage of IFX Web Components

back to top

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.

back to top



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 sass

3. 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
  ],
 ...
})

back to top



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 sass

3. 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.

back to top



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>'

back to top



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 sass

3. 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>

back to top



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:

  1. install the package by following the instructions for the respective framework
  2. 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);

back to top



Local development

Installation

git clone https://github.com/Infineon/infineon-design-system-stencil.git

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

yarn/npm install

back to top



Build 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:components

Start Storybook

To run storybook locally (automatically rebuilds on changes), run:

yarn/npm run storybook

back to top



Example applications

To test the standard Stencil components within our example applicatons, navigate to

cd examples/stencil-components

and 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-components

and 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.

back to top



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)

back to top


Contact

Email

[email protected]

back to top