npm package: @sigmastocks/sigmastocks-components
Description: vue component library for Sigmastocks
Latest version: 0.2.69

# sigmastocks-components

vue component library for Sigmastocks

## Running locally

Install dependencies
```
yarn install
```
Serve
```
yarn serve
```
Access at http://localhost:8080/.

## Releasing to npm
Release to npm happens automatically via the package semantic-release when a commit is pushed to `master`.

A release will only be triggered up to the commit which starts with the phrase `release: `. One way of doing this is by adding `release: ` to the beginning of the PR merge commit message.

The package also automatically creates a release on GitHub with the version number tagged.

## Contribution guide
Some information on how to modify this package.
### Create a component
So you wan't to create a new component? Great! Here's a walkthrough on what to do.

In this example we'll create the fictional component `<sc-image>`, which will be an image wrapper. 
  1. Check out **a new branch** from `master`. We will call this `feature/image`.
  2. **Creating a Vue file** in `src/components/`, for example `src/components/sc-image.vue`. This is the file in which you will place your scripts and methods. Add your props, imports, html-tags and everything else, just as you would in a normal Vue file.
  3. **Export the component** by adding it to `src/components/index.js`, which will make it available for the projects using this package. Do this by first importing your component (`import ScImage from './sc-image';`) and the exporting it. You do the latter by adding the name of the component in the `export default` hash, like `export default { ScImage }`.
  4. **Add the component to `install`** to make it available for Jest tests. Add it to the `install(Vue)` function in `src/components/index.js`, for example by adding `Vue.component('ScImage', ScImage);` at the end. 
  5. **Create a scss file** to go with the Vue file. Place it in `src/assets/styles/`, for example `src/assets/styles/_image.scss`. The reason for doing this is so developers can use the css classes separately, if they are unable to use the Vue components.
  6. **Import the scss file** in `src/assets/styles/components.scss`, by adding `@import 'image';` at the end of the file (the name of you scss file goes instead of image, but make sure to remove the underscore and file ending [`_image.scss` becomes `image`]).
  7. The above should mean that your Vue component is ready to go. To make it easier for people to see how it works, **create an example in `src/App.vue`**. Have a look on how the other examples are written and try to do the same. You should add both the component itself, as well as some documenting code (using the `<pre>` and `<code>` blocks). Don't forget to actually import the component in the `App.vue` file to make it work.
  8. Add some **documentation to the `README.md`** file. This is written in a markdown format. Again, have a look at how the other components are specified and follow the same pattern.
  9. That's it! Push your branch to Github, create a pull request, and ask someone to review it. Make sure that the **reviewer adds 'release: '** in front of the merge commit message, so it gets released to npm. 

### Modify a component
1. Check out **a new branch** from `master`, for example `fix/image`.
2. Make your changes.
3. Make any necessary **amendments in `src/App.vue`**. For example, if you've added a prop, create an example in which this prop is featured. Make sure to change both the code and the documentation.
4. **Update the `README.md`** to reflect any changes made.
5. Push your branch, create a pull request, and ask someone to review it. Make sure that the **reviewer adds 'release: '** in front of the merge commit message, so it gets released to npm.

## Utilities
### Colors
All colors start with `$sc-color-`:
```scss
$sc-color-primary: $sc-color-trusted-green;
$sc-color-primary-dark: $sc-color-trusted-green-dark;
$sc-color-primary-darker: $sc-color-trusted-green-darker;
$sc-color-secondary: $sc-color-daring-orange;
$sc-color-secondary-dark: $sc-color-daring-orange-dark;

$sc-color-background: $sc-color-light-gray;
$sc-color-border: #9E9E9E;
$sc-color-shadow: rgba(0, 0, 0, 0.15);

$sc-color-warning: $sc-color-caring-yellow;
$sc-color-error: #C84132;

$sc-color-text-highlight: #333333;  // 80% black, used for highlights and high-emphasis text
$sc-color-text: #545454; // 67% black, for standard text
$sc-color-text-gray-out: #9E9E9E; // 38% black, used in disabled items and other low-emphasis texts
```
The above colors are based on the following, but try not to use them directly:

```scss
$sc-color-trusted-green: #00704A;
$sc-color-trusted-green-dark: #006442;
$sc-color-trusted-green-darker: #00593b;
$sc-color-young-green: #72BB6F;
$sc-color-daring-orange: #ED6752;
$sc-color-daring-orange-dark: #CE544E;
$sc-color-caring-yellow: #FBBC43;

$sc-color-gray: #F1F1F1;
$sc-color-light-gray: #FAFAFA;
$sc-color-white: #FFFFFF;
```

### Variables
```scss
$sc-border: 1px solid $sc-color-border;
$sc-box-shadow: 0 3px 8px $sc-color-shadow;
```

### Font families
```scss
$sc-base-font-family: "Proxima Nova", "aaux-next", "Helvetica Neue", Arial, sans-serif;
$sc-base-heading-family: "Proxima Nova", "aaux-next", "Helvetica Neue", Arial, sans-serif;
$sc-base-small-heading-family: "Bree Serif", serif;
```

### Foundation breakpoints
```scss
$breakpoints: (
  small: 0px,
  medium: 640px,
  large: 1200px,
  xlarge: 1700px,
  xxlarge: 2048px,
);
```


## Components

### sc-body
```javascript
props: {
  error: {
    type: Boolean,
    default: false,
  },
  finePrint: {
    type: Boolean,
    default: false,
  },
  large: {
    type: Boolean,
    default: false,
  },
},
```

### sc-button
```javascript
props: {
  id: {
    type: String,
    default: 'button',
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  large: {
    type: Boolean,
    default: false,
  },
  secondary: {
    type: Boolean,
    default: false,
  },
  href: {
    type: String,
    default: null,
  }
},
```
If a href is set the component becomes a <a> tag and will act as a link. Otherwise acts like a button and emits event `clicked` on click, with payload `{id: id}`

### sc-checkbox
```javascript
props: {
  id: {},
  value: {
    default: false,
  },
  name: {},
  label: {
    type: String,
    default: '',
  },
  trueValue: {
    default: true,
  },
  falseValue: {
    default: false,
  },
  disabled: {
    default: false,
  },
  smallLabel: {
    type: Boolean,
    default: false,
  },
  alignCheckboxCenter: {
    type: Boolean,
    default: false,
  },
  errorMessage: {
    type: String,
    default: '',
  },
  showError: {
    type: Boolean,
    default: false,
  },
},
```

Emits event `input` on change, with payload `$event.target.checked ? trueValue : falseValue`. This can be simplified by using `v-model` with the component. 

### sc-container
A standard container, with absolute width for `large` and `xlarge` devices, and relative for `medium` and smaller.

### sc-dropdown
```javascript
  props: {
    errorMessage: {
      type: String,
      default: '',
    },
    options: {
      type: Array,
      default: () => [],
      required: true,
    },
    label: {
      type: String,
    },
    value: {
      required: true,
    },
    showError: {
      type: Boolean,
      default: false,
    },
  },
```

Emits event `input` on change, with payload `value` which is the selected value from the dropdown. This can be simplified by using `v-model` with the component. The `options` prop should consist of an array with objects that contain the keys `value, label`.


### sc-heading
```javascript
props: {
  small: {
    type: Boolean,
    default: false,
  },
},
```

### sc-highlight
```javascript
props: {
  primary: {
    type: Boolean,
    default: false,
  },
  small: {
    type: Boolean,
    default: false,
  },
  large: {
    type: Boolean,
    default: false,
  },
},
```

### sc-link
```javascript
props: {
  link: {
    type: String,
    default: null,
  },
  menu: {
    type: Boolean,
    default: false,
  },
  large: {
    type: Boolean,
    default: false,
  },
}
```

### sc-input
```javascript
props: {
  errorMessage: {
    type: String,
    default: '',
  },
  inputClass: {
    type: String,
    default: '',
  },
  label: {
    type: String,
  },
  placeholder: {
    type: String,
  },
  showError: {
    type: Boolean,
    default: false,
  },
  showValid: {
    type: Boolean,
    default: false,
  },
  value: {},
},
```

Emits event `input` on change, with payload `value` from the wrapped input field. This can be simplified by using `v-model` with the component. Any additional props sent will be passed to the wrapped input field. `label` can be overwritten with `placeholder` if you want them different from eachother.

### sc-radio-group
```javascript
props: {
  value: {
    type: [String, Number],
    default: null,
  },
  options: {
    type: Array,
    default: null,
  },
  name: {
    type: String,
    default: 'radio',
  },
},
```
Emits event `input` on change, with payload `value`. This can be simplified by using `v-model` with the component. The prop `options` should contain objects with possible keys `value, label, disabled`.


### sc-loading-spinner
```javascript
props: {
  props: {
    fullscreen: {
      type: Boolean,
      required: false,
      default: false,
    },
  },
},
```

### sc-slider
```javascript
props: {
  props: {
    minValue: {
      type: Number,
      required: true,
      default: 0,
    },
    maxValue: {
      type: Number,
      required: true,
      default: 0,
    },
    value: {
      type: Number,
      required: false,
      default: 0,
    },
    unit: {
      type: String,
      required: false,
      default: '',
    },
  },
},
```

Emits events `change` and `input`, with payload `value` from the slider. `change` is emitted on mouse-up only, while `input` is emitted continuously on change. `v-model` can be used with the component, and is in that case linked to the `input` event. The `minValue` and `maxValue`are required props, further it's possible to set the initial value through the `value` prop, and the `unit` if one wants it to be shown in the labels next to the slider.