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

## Dev, Build and Test

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

import PFM_Base from 'c/pfmBase';

export default class Row extends PFM_Base {
    @api pull; // xx-small, x-small, small, medium, large, x-large
    @api vertical; // boolean
    @api wrap; // boolean
    @api nowrap; // boolean
    @api center; // boolean
    @api align; // start, center, end, space, spread
    @api overflowY; // boolean
    @api overflowX; // boolean
    @api border; // top, right, bottom, left, horizontal, vertical
    @api isRelative; // boolean

    @api
    get padding() {
        return super.paddingStr;
    }
    set padding(value) {
        super.paddingStr = value;
    }

    @api
    get margin() {
        return super.marginStr;
    }
    set margin(value) {
        super.marginStr = value;
    }

    @api // danger, success, brand, shade, shade-dark, blue-dark
    get theme() {
        return this.background;
    }
    set theme(value) {
        this.background = value;
    }

    @track classes;
    @track borderStr;

    connectedCallback() {
        this.borderValue();

        super.connectedCallback('slds-grid pfm-row');

        const classBase = 'slds-grid';

        let valPull = this.pull,
            valVertical = this.vertical,
            valWrap = this.wrap,
            valAlign = this.align,
            valCenter = this.center,
            valOverflowY = this.overflowY,
            valOverflowX = this.overflowX,
            valNoWrap = this.nowrap,
            valBorder = this.borderStr,
            valIsRelative = this.isRelative;

        let pull,
            vertical,
            wrap,
            center,
            nowrap,
            align,
            overflowY,
            overflowX,
            border,
            background = this.background ? ' pfm-row-theme_' + this.background : '',
            relative;

        pull = valPull ? ' ' + 'slds-grid_pull-padded-' + valPull : '';
        vertical = valVertical ? ' ' + 'slds-grid_vertical' : '';
        wrap = valWrap ? ' ' + 'slds-wrap' : '';
        nowrap = valNoWrap ? ' ' + 'slds-nowrap' : '';

        center =
            valCenter && valVertical
                ? ' slds-grid_vertical-align-center'
                : valCenter && !valVertical
                ? ' slds-grid_align-center'
                : '';

        align = valAlign ? ' slds-grid_align-' + valAlign : '';

        overflowX = valOverflowX ? ' slds-scrollable_x' : '';
        overflowY = valOverflowY ? ' slds-scrollable_y' : '';

        border = valBorder ? ' ' + valBorder : '';

        relative = valIsRelative ? ' slds-is-relative' : '';

        this.classes =
            this.classStr +
            pull +
            vertical +
            wrap +
            nowrap +
            center +
            align +
            overflowY +
            overflowX +
            border +
            background +
            relative;
    }

    borderValue() {
        switch (this.border) {
            case 'top':
                this.borderStr = 'slds-border_top';
                break;
            case 'bottom':
                this.borderStr = 'slds-border_bottom';
                break;
            case 'left':
                this.borderStr = 'slds-border_left';
                break;
            case 'right':
                this.borderStr = 'slds-border_right';
                break;
            case 'horizontal':
                this.borderStr = 'slds-border_left slds-border_right';
                break;
            case 'vertical':
                this.borderStr = 'slds-border_top slds-border_bottom';
                break;
            default:
                this.borderStr = '';
        }
    }
}