Emergn Design System VFQ

Emergn Design System is a set of tools, processes, guidelines and philosophies that combine to drive how a team designs a product.

Emergn Design System is depended on Emergn Design System Theme package.

Installation

To install Design System, you can use npm.

$ npm install @emergn/design-system-vfq

Using

Available components:

• Button
• ButtonGroup
• Card
• BaseCard
• Checkbox
• Checkboxes
• CheckboxTree
• Dropdown
• FilterableDropdown
• FilterableMultiselect
• FormGroup
• Grid
• Icon
• Input
• InputNumber
• InputPassword
• Link
• LinkGroup
• LinkHighlight
• LinkHighlightGroup
• Modal
• Multiselect
• Notification
• Radio
• RadioButtons
• Tag
• TagGroup
• Textarea

To use these components, need to import style in your root js file by:

import '@emergn/design-system-vfq/dist/index.css';

and then import component in needed place, like this:

import { Button, ButtonGroup } from '@emergn/design-system-vfq';

Changelog

[1.3.4] - In progress

[1.0.15] - 2022-09-21

Bugfix

• Fixed type of the +/- buttons in InputNumber (IDS-26)

[1.0.14] - 2022-09-21

Bugfix

• Fixed Typescript issue with Types in Notification component
• Fixed left-right padding in Button component
• Fixed 'name' attribute in FilterableDropdown (IDS-25)
• Fixed color of the required sign in FormGroup (IDS-25)

[1.0.13] - 2022-09-02

Bugfix

• Fixed initialSelectedItem in FilterableDropdown component (IDS-4)

[1.0.12] - 2022-09-02

New components

• Added FilterableDropdown component (IDS-4)

Improvement

• Added sections logic in all Select components (IDS-9)

[1.0.11] - 2022-08-24

Improvement

• Added clearMargin prop for the FormGroup (IDS-24)

[1.0.10] - 2022-08-18

Bugfix

• Fixed notification styling issues (DS-590)
• Fix UI issue with fullHeight Cards (IDS-15)

[1.0.9] - 2022-08-16

Bugfix

• Fixed textarea issues with height (DS-588)
• Fixed LinkHighlight focus in Safari (IDS-20)
• Fix accessibility issues in Form components (IDS-19)
• Fixed notification styling issues (DS-590)

Improvement

• Changed separator in the hidden inputs in Selects (DS-585)
• Changed color of the brand visited link (temp solution) (IDS-21)
• Added required indicator for single checkbox (IDS-25)
• Added ForwardRef to Links (DS-589)

[1.0.8] - 2022-08-01

Improvement

• Added name prop for Select components (DS-585)

[1.0.6] - 2022-07-28

Improvement

• Added isRequired prop for the FormGroup, added hidden input for uncontrollable Select components (DS-585)

Bug Fixes

• Small bugfix in Card component (DS-581)

Improvement

• Added properties descriptions in the Multiselect and Grid components, renamed onReset property in Multiselect (DS-576)

[1.0.5] - 2022-06-17

New components

• Added Notification component (DS-263)
• Added FilterableMultiselect component (DS-557)

Documentation

• Added documentation for UseWindowSize hook (DS-549)

Improvement

• Added headerVariant prop for the modal, improved modal sizes (DS-548)
• Changed breakpoint mixin naming, update all places where mixin is used (DS-549)
• Updated CSS spacings in group components (DS-541)
• Added fullScroll prop to the Modal (DS-567)

Bug Fixes

• Fix for icons placement in IconNumber (DS-545)

Utils

• Added useWindowSize custom hook (DS-479)

[1.0.4] - 2022-05-17

Assets

• Assets package version @emergn/[email protected]

New components

• Added multiselect component (DS-83)

Improvement

• Updated buttons variants, added Neutral (DS-533)

Bug Fixes

• Fix for hideLabel prop on Checkboxes/Radios (DS-518)

[1.0.3]

Bug Fixes

• Fix for value prop in Input component (DS-534)