How to use the Design System with custom field-types?

It's possible to use our Design System in custom field-types.

To do that, we first have to clone the repository for the local development plugin:

git clone https://github.com/storyblok/storyblok-fieldtype
cd storyblok-fieldtype
npm install

Then we need install the design system:

npm install storyblok-design-system --save

Adding the Sass Variables

To load the necessary variables we have to install the sass-loader into the project:

npm install --save-dev sass sass-loader@10.1.1 style-loader style-resources-loader

Finally, we can add the variables from the Design system through the vue.config.js file. Add the following to the file:

vue.config.js
module.exports = {
  ...
  css: {
    extract: false,
    loaderOptions: {
      sass: {
        additionalData: `
        @import "~storyblok-design-system/src/assets/styles/variables.scss";
        @import "~storyblok-design-system/src/assets/styles/global.scss";
        @import "~storyblok-design-system/src/assets/styles/resets.scss";
        @import "~storyblok-design-system/src/assets/styles/mixins.scss";`
      },
    },
  }
}

Loading a specific component

Now we can import a specific component directly from design system. Open src/Plugin.vue and add the following code. You need the import the component you want to use (Line 23) and use it in Vue as a component (Line 27) and then you should be able to use it in your template (Line 3).

src/Plugin.vue
<template>
  <div>
    <Radio
      name="radio-inline"
      id="selected"
      label="Jon Doe"
      v-model="model.selected"
      native-value="Jon Doe"
      inline
    />
    <Radio
      name="radio-inline"
      id="unselected"
      label="Albert Einstein"
      v-model="model.selected"
      native-value="Albert Einstein"
      inline
    />
  </div>
</template>

<script>
import Radio from 'storyblok-design-system/src/components/Radio'
export default {
  mixins: [window.Storyblok.plugin],
  components: {
    Radio,
  },
  methods: {
    initWith() {
      return {
        // needs to be equal to your storyblok plugin name
        plugin: 'enter-your-field-type-name',
        selected: '',
      }
    },
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value);
      },
      deep: true
    }
  }
}
</script>

<style>
.sb-radio {
  margin: 8px;
}
</style>

Removing UI Kit

In this example, you probably wouldn't want to use the old UI Kit CSS, that is embedded in our index-latest.css. You can remove that asynchronous with the following function, for example in the pluginCreated function of the src/Plugin.vue file.

export default {
  methods: {
    removeUiKit() {
      this.removeStyleByHref(
        "https://app.storyblok.com/assets/css/index-latest.css"
      ); // in local dev mode
      this.removeStyleByHref(
        "https://plugins.storyblok.com/assets/css/index-latest.css"
      ); // built plugin
    },
    removeStyleByHref(href) {
      const style = document.querySelector(`link[href="${href}"]`);

      if (style) {
        style.parentNode.removeChild(style);
      }
    },
    pluginCreated() {
      this.removeUiKit();
    },
  },
}