npm package: @studyportals/styles-components
Description: Studyportals component styles for use within Portals or microservices to comply with the Styleguide
Author: Front-end Tribe
Latest version: 3.0.1

# 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](http://sass-guidelin.es/) > [Architecture](http://sass-guidelin.es/#architecture) > [Components folder](http://sass-guidelin.es/#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](http://smacss.com/) and the [7-1 pattern](https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4).

More information about how we use the patterns, can be found in the [Knowledge Vault](http://knowledge-vault.studyportals.xyz/good-practices/front-end/css-good-practices.html#core-styling-architecture-of-studyportals).

## 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](https://help.github.com/en/github/managing-packages-with-github-package-registry/configuring-npm-for-use-with-github-package-registry#authenticating-to-github-package-registry) 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:
```html
<div class="ViewPasswordContainer">      
      <input type="password" class="ViewPassword">
      <button class="ToggleViewPassword">ToggleText</button>
</div>
```

Text input:
```html
<div class="SCFormInput">      
      <input type="text" required>
      <label>Some label</label>
</div>
```

MultiSelect:
```html
<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](https://github.com/studyportals/MultiSelect). 

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](./LICENSE) file for details.

---

XOXO,

Shared with style team