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-:

$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 maxValueare 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.