Infsoft.WPE.App.UIComponents 0.0.8

Workplace Experience (WPE 3.0) Components Library for UI

This library contains common components used for displaying data.

Managers

• IMouseManager.cs: Can be subscribed to receive information clicks (DOM elements)

Components

Ions

• Serp_Image_Icon.razor:
• Serp_Image_Round.razor
• Serp_Image_Rect.razor

Atoms

General

• Card_Background.razor
• Coffee_Coin.razor
• Form_Label.razor
• Input_Notification.razor
• List_Item.razor
• Location_Info.razor
• Main_Menu_Tab_Desktop.razor
• Main_Menu_Tab_Mobile.razor
• Nav_Tab.razor
• Page_Indicator.razor
• Profile_Pic.razor
• Searchbar.razor
• Searchbar_Single.razor
• Site_Button.razor
• Site_Tag.razor
• Tab.razor
• Tag.razor
• Toggle.razor
• Weather_Info.razor

Form

• Form_Dropdown_Selection.razor

Molecules

General

• Dropdown_Body.razor
• People_Info.razor
• Selectable_Category_And_Title.razor
• Serp_List_Item.razor
• Tabs_Wrapper.razor

Form

• Form_Dropdown.razor
• Form_Wrapper.razor

Text

Allows formatting of text in an uniform way. E.g. making text uppercase or bold.

• Text_Regular.razor
• Text_Uppercase.razor
• Text_ExtraBold.razor
• Text_Display.razor
• Text_Bold.razor

Listeners

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

Colors

All available colors can be found below:

Black

• color-black-rgb
• color-black-04
• color-black-05
• color-black-10
• color-black-15
• color-black-20
• color-black-25
• color-black-35
• color-black-50
• color-black-60
• color-black-75
• color-black

White

• color-white-rgb
• color-white-05
• color-white-10
• color-white-15
• color-white-20
• color-white-25
• color-white-35
• color-white-50
• color-white-75
• color-white-85
• color-white-95
• color-white

Grey Primary

• color-grey-primary-lighter
• color-grey-primary-light
• color-grey-primary-mid
• color-grey-primary-dark
• color-grey-primary-darker-rgb
• color-grey-primary-darker-85
• color-grey-primary-darker

Grey Secondary

• color-grey-secondary-24
• color-grey-secondary-25
• color-grey-secondary-26
• color-grey-secondary-27
• color-grey-secondary-28
• color-grey-secondary-29
• color-grey-secondary-30
• color-grey-secondary-31
• color-grey-secondary-32
• color-grey-secondary-33
• color-grey-secondary-34
• color-grey-secondary-35-rgb
• color-grey-secondary-35
• color-grey-secondary-35-70
• color-grey-secondary-36

Signal colors

• color-signal-red-rgb
• color-signal-red-03
• color-signal-red-10
• color-signal-red-15
• color-signal-red-20
• color-signal-red-25
• color-signal-red-50
• color-signal-red
• color-signal-green-rgb
• color-signal-green-05
• color-signal-green-10
• color-signal-green-15
• color-signal-green-25
• color-signal-green-35
• color-signal-green-50
• color-signal-green
• color-signal-yellow-rgb
• color-signal-yellow-10
• color-signal-yellow

Active

• color-blue-active-rgb
• color-blue-active-10
• color-blue-active-20
• color-blue-active-35
• color-blue-active
• color-blue-active-dark

Colors

• color-yellow
• color-orange-rgb
• color-orange-25
• color-orange
• color-orange-popup-light
• color-orange-popup
• color-red-rgb
• color-red-15
• color-red
• color-purple
• color-blue-light
• color-blue-lighter
• color-blue-dark
• color-turquoise
• color-green-rgb
• color-green-10
• color-green-15
• color-green-50
• color-green
• color-infsoft

Brand

• color-brand-primary-03
• color-brand-primary-05
• color-brand-primary-15
• color-brand-primary-25
• color-brand-primary-35
• color-brand-primary-50
• color-brand-primary-75
• color-brand-primary
• color-brand-primary-on-dark-75
• color-brand-primary-on-dark
• color-brand-primary-wcag-05
• color-brand-primary-wcag-25
• color-brand-primary-wcag-65
• color-brand-primary-wcag-85
• color-brand-primary-wcag
• color-brand-background-1-80
• color-brand-background-1
• color-brand-background-2

Brand base colors, overriden per tenant

• color-brand-primary-rgb
• color-brand-primary-on-dark-rgb
• color-brand-primary-wcag-rgb
• color-brand-background-1-rgb
• color-brand-background-2-rgb

Setup

Add this at the very end of MainLayout:

<UIComponents />

Add this to Program.cs:

using Infsoft.WPE.App.UIComponents;
...
builder.Services.AddUIComponents();