RFC: Component support (e.g. Vue/React)

[Jamiewarb]

After the SCSS v1, we'll likely want to support Vue/React as well, and makes this as easy as possible.

A potential avenue to do this would be to create Vue or React components that use the existing stylesheets but provide a wrapper component around it to make them easier to use.

For example, the Wrapper component could look like this:

<template>
  <div :class="wrapperClasses" class="v-wrapper" v-bind="$attrs">
    <slot />
  </div>
</template>

or the Stack could look like this:

<template>
  <div :class="stackClasses">
    <slot />
  </div>
</template>

<script>
const availableSizes = Object.keys(sizesMap); // Define a sizesMap that's synced with the SCSS config to validate prop value

export default {
  name: 'BaseStack',
  props: {
    center: { type: Boolean, default: false },
    spacing: { type: String, default: 'base', validator: (value) => availableSizes.includes(value) },
    strip: { type: Boolean, default: true },
  },
  computed: {
    stackClasses() {
      return {
        'o-stack': true,
        [`o-stack--${this.spacing}`]: this.spacing,
        'o-stack--strip': this.strip,
        'o-stack--center': this.center,
      };
    },
  },
};
</script>

We would then be able to produce several distributions, and allow the end user to choose whichever distribution they require for their project.

This does have the maintenance overhead of providing components for each object we support, and for each JS framework that we support, but would allow Captain to be more easily integrated into those projects.