Styles - Components

This package gathers shared components which can be used within the Portal and in microservices.
These components should only consist out of styling (no javascripts etc) and contrary to abstracts, these files will generate output when being imported.

Reference: Sass Guidelines > Architecture > Components folder

$3

The Styles - Components package is created as part of restructuring Studyportals styling. This structure is based on a combination of SMACCS and the 7-1 pattern.

More information about how we use the patterns, can be found in the Knowledge Vault.

Getting started

$3

``
npm install --save-dev @studyportals/styles-components
`

$3

1. Ensure you are authenticated to the GitHub Package Registry. This section explains how.
2. Run npm publish

Usage

Within your project, you should only load in the components which you actually need. For example, only load the button component and/or the checkbox component.

$3

- Button
- Checkbox
- ViewPassword
- Text input
- MultiSelect

To do this, you only need to import the specific files from the package into your project.

Examples:
`
// Import only the button component.
@import '~@studyportals/styles-components/components/Button';

// Importing using the full url
@import './node_modules/@studyportals/styles-components/components/Button';
`

The ~ is an alias for node_modules. You might need to set this up in your project. Otherwise you can use the full url.

For all available files, you can explore the contents of this package.

$3

Some components require HTML markup to be displayed in the correct way.

#### no specific markup
- Button
- Checkbox

#### specific markup

ViewPassword:
`html



`

Text input:
`html



`

MultiSelect:
`html



``

#### MultiSelect

MultiSelect is a complex component which has it's own package.

You can apply the styling of multiselect by using the example above. Keep in mind you have to take care of the showing, hiding, populating of fields, and switching of classes to show the correct icons and states of the elements.

- .FloatingLabel & MultiSelectIcon can have the additional class "is-active" to indicate the user clicked on the select box.

- .MultiSelectSearchBox can have the additional class "is-empty" when a user hasn't search for anything. This will change the styling accordingly

$3

In specific inplementations where you just need the styling of the components you can use mixins.
The following mixins are available to use:

| Component | Mixin |
|-------------|-------------------------|
| button | @include button( ) |
| TextInput | @include textInput( ) |
| MultiSelect | @include multiSelect( )|

License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.

---

XOXO,

Shared with style team