README
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.
- Check out a new branch from
master
. We will call thisfeature/image
. - Creating a Vue file in
src/components/
, for examplesrc/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. - 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 theexport default
hash, likeexport default { ScImage }
. - Add the component to
install
to make it available for Jest tests. Add it to theinstall(Vue)
function insrc/components/index.js
, for example by addingVue.component('ScImage', ScImage);
at the end. - Create a scss file to go with the Vue file. Place it in
src/assets/styles/
, for examplesrc/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. - 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
becomesimage
]). - 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 theApp.vue
file to make it work. - 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. - 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
- Check out a new branch from
master
, for examplefix/image
. - Make your changes.
- 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. - Update the
README.md
to reflect any changes made. - 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-
:
$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:
$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
$sc-border: 1px solid $sc-color-border;
$sc-box-shadow: 0 3px 8px $sc-color-shadow;
Font families
$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
$breakpoints: (
small: 0px,
medium: 640px,
large: 1200px,
xlarge: 1700px,
xxlarge: 2048px,
);
Components
sc-body
props: {
error: {
type: Boolean,
default: false,
},
finePrint: {
type: Boolean,
default: false,
},
large: {
type: Boolean,
default: false,
},
},
sc-button
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 tag and will act as a link. Otherwise acts like a button and emits event clicked
on click, with payload {id: id}
sc-checkbox
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
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
props: {
small: {
type: Boolean,
default: false,
},
},
sc-highlight
props: {
primary: {
type: Boolean,
default: false,
},
small: {
type: Boolean,
default: false,
},
large: {
type: Boolean,
default: false,
},
},
sc-link
props: {
link: {
type: String,
default: null,
},
menu: {
type: Boolean,
default: false,
},
large: {
type: Boolean,
default: false,
},
}
sc-input
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
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
props: {
props: {
fullscreen: {
type: Boolean,
required: false,
default: false,
},
},
},
sc-slider
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.