JD Components

Installing / Setup

Adding to Project

npm install @jdplc/jd-components

Importing Components

Use the following import pattern to load in the required component:

import Component from '@jdplc/jd-components/sfc/ComponentName.vue';

Using with Jest

Add the following to the Jest config to allow for the components to be loaded and transformed in tests:

"transformIgnorePatterns": [
  "/node_modules/(?!@jdplc/jd-components)"
],

Parsing Components (for vue-cli projects)

Add the following into the vue.config.js file to allow the components to be transpiled correctly when your project is built:

transpileDependencies: ['@jdplc/jd-components'],

Creating a Component

When creating a component, please follow these guidelines so the component can be integrated correclty into the Content Editor.

General Component Setup

Use this basic component template as a base for the component:

<template>
  <div :class="className">
    <!-- HTML for component here... -->
  </div>
</template>

<script>
export default {
  name: 'ComponentName',

  data: () => ({
    className: 'component-class-name'
  });
};
</script>

<style lang="scss">
.component-class-name {
  // styles for component go in here...
}
</style>

[NOTE]: Each component needs to have a name property. Styles should be nested inside the main component class. (i.e. .main-banner) (Helps keep them scoped without having to explicity add the scoped attribute to the style tag).

Tests

npm run test npm run test:coverage