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

Styles packages structure

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

Installing the package

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

Publishing the package on the GitHub Package Registry

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.

supported components

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

form elements HTML Markup

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

no specific markup

• Button
• Checkbox

specific markup

ViewPassword:

<div class="ViewPasswordContainer">      
      <input type="password" class="ViewPassword">
      <button class="ToggleViewPassword">ToggleText</button>
</div>

Text input:

<div class="SCFormInput">      
      <input type="text" required>
      <label>Some label</label>
</div>

MultiSelect:

<div class="SCMultiSelect">
      <label class="MultiSelectLabel"
            ><label class="FloatingLabel"> Label </label>
            <span class="MultiSelectPlaceholder"> Selected Value </span>
      </label>
      <div class="MultiSelectIcon"></div>
      <div class="MultiSelectDropDown">
            <div class="MultiSelectSearchBoxWrapper">
                  <input
                        placeholder="Search by country"
                        type="search"
                        class="MultiSelectSearchBox"
                  />
                  <i class="lnr-magnifier MultiSelectSearchBoxIcon"></i>
            </div>
            <div>
                  <ol>
                        <li class="MultiSelectGroupLabel">
                              Group label 1
                        </li>
                        <li	class="MultiSelectOption">
                              Option 1 
                        </li>
                        <li class="MultiSelectOption">
                              Option 2
                        </li>
                  </ol>
                  <ol>
                        <li class="MultiSelectGroupLabel">
                              Group label 2 
                        </li>
                        <li	class="MultiSelectOption">
                              Option 3
                        </li>
                        <li class="MultiSelectOption">
                              Option 4
                        </li>
                  </ol>
            </div>
      </div>
</div>

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

mixins

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