Infsoft.WPE.App.Components 0.1.0-next06

Workplace Experience (WPE) Components Library for UI

This library contains common components used for displaying data.

Components

ActionElements

These components provide user interaction elements.

Animations

These components can be used to indicate various loading states.

Atom

These small components are used in various more complex components. (Smallest parts of the UI)

Buttons

The buttons defined here are used all over the application to achieve a uniform UI.

Cards

These components are used to display content grouped in an uniform way. They provide several subcomponents like buttons or text components.

Charts

Provides components to render content in charts. Currently only a pie chart is available.

DatePicker

This component provides a date/time picker which can be used to query either for a time, date or both.

Empty

These components are used to indicate empty states in the UI. For example an empty list.

Form

These components are used all over the appication to enable the user to interact with the UI. Most components are used in forms and other input elements.

Module

These components are used to give information to the user. For example a toast notication.

Text

Allows formatting of text in an uniform way. E.g. making text uppercase or bold. Additionally a uniform control for text input is provided.

Listeners

Allows to detect user interaction on the UI. E.g. detecting swipe gestures on mobile screens.

Use the predefined colors

Simply define this function in a separate SASS file _functions.sass in your wwwroot folder.

@function color($name, $percentage) {
    @if ($percentage != null) {
        @if ($percentage % 5 != 0)
        {
            @error "Only 5 percent steps are allowed";
        }
        @return var(--color-#{"" + $name}-#{$percentage});
    }
    @else {
        @return var(--color-#{"" + $name});
    }
}

This allows you to use the color steps (5 percent opacity steps) like this in your own SASS stylesheets.

@use "functions";
button {
    background-color: functions.color("brand-primary");
    color: functions.color("black", 10);
}

All available colors can be found below:

• black
• white
• primary-lighter
• grey-primary-light
• grey-primary-mid
• grey-primary-dark
• grey-primary-darker
• signal-red
• signal-green
• signal-yellow
• blue-active
• blue-active-dark
• yellow
• orange
• orange-popup-light
• orange-popup
• red
• purple
• blue-light
• blue-lighter
• blue-dark
• turquoise
• green
• infsoft
• grey-secondary-35
• brand-primary
• brand-primary-on-dark
• brand-primary-wcag
• brand-background-1
• brand-background-2