Getting Started

Butter-vue is a collection of SCSS styles, mixins, and Vue components for building interfaces based on our standard components.

To install, simply:

npm i --save @brd.com/butter-vue

And add this line to your nuxt.config.js file:

modules: [
// ... other modules
'@brd.com/butter-vue/module'
]

Then you can integrate global styles into your layout:

<style lang="scss">
@import "butter-global";

And mixins into any components that need them:

<style lang="scss" scoped>
@import "butter-mixins";

Development

When you're doing development, create an MR for your branch, and maybe re-run your CI publish job. You'll be given a MR-specific version that you can use to develop with before the MR gets merged (e.g. 0.1.6-mr4.5). The version number is, whatever the latest master branch version, followed by mr<ID>.<commits>, where <ID> is the MR ID, and <commits> is the number of commits since master.

Icons

Add a .vue file with <template> surrounding the <svg> to components/icons.

close.vue

<template>
  <svg><!-- svg contents --></svg>
</template>

Usage

<butter-icon name="close" />

TODO:

We want to mimic the style guides as closely as possible, defining things using cascading stylesheets where possible.

PartnerMessage

title, message, form, userActions, partner, limit, limitLabel

Form

value, type, name, label, verify, placeholder, link

userActions can include a require property that will disable the button until the required input is filled.

{ 
  title: 'Register',
  require: ['email','password'],
}