fonteva-design-guide/force-app/main/default/lwc/pfmHr/pfmHr.js

## Dev, Build and Test

import { LightningElement, api, track } from 'lwc';

export default class Hr extends LightningElement {
    @track classes;
    @track sizeStr;

    @api
    get size() {
        return this.sizeStr;
    }
    set size(value) {
        this.sizeStr = value;
    }

    connectedCallback() {
        this.sizeValues();
        const classBase = 'pfm-hr';
        let valSize = this.sizeStr;

        let size;

        size = valSize ? ' ' + valSize : '';
        size = size.indexOf(',') > -1 ? size.replace(',', '') : size;

        this.classes = classBase + size;
    }
    sizeValues() {
        this.sizeDirection('top:', 'pfm-m-top_');
        this.sizeDirection('bottom:', 'pfm-m-bottom_');
        this.sizeDirection('vertical:', 'pfm-m-vertical_');
    }
    sizeDirection(value, replace) {
        if (this.size) {
            if (typeof this.sizeStr === 'string' && this.sizeStr.indexOf(value) > -1) {
                this.sizeStr = this.sizeStr.replace(value, replace);
            }
        }
    }
}