Develop a component with Style System in AEM

🐣 Creating a heading component with style system

Creating a heading component from title component.

Create a component called heading inside /apps/your-project-flder/components/content/~create component

create heading.html

<div class="cmp_heading_textbox" data-sly-use.headingObject="heading.js">
    <h1 class="cmp_heading_text" data-sly-element=${currentStyle.type}>${headingObject.title}</h1>
</div>

create heading.js

"use strict";
use(function() {
    var titleByAuthor = granite.resource.properties["titleProperty"];
    var jcrtitle = currentPage.title;
    var pageName = currentPage.name;
    var title = titleByAuthor || jcrtitle || pageName;

    return {
        title:title
    };
});

Next thing we need is the dialog boxes. So copy cq:dialog and cq:design_dialog from title component.

Now in order to have style tab. Copy styletab node from any core component and paste it inside items node in cq:design_dialog

Add a styles in your clientlib-components folder. Create a clientlib folder for your component. create css.txt and styles.less files inside css folder as per the standard practice for adding styles to the component.

We are using BEM notation to create the styling.
style.less

.headingTextBox-dark {
    .cmp_heading_textbox {
    padding: 2px;
        background-color:#555555;
    }
    .cmp_heading_text {
    color: #ffffff;
    }
}
.headingTextBox-light {
    .cmp_heading_textbox {
    padding: 2px;
        background-color:#FFFFFF;
    }
    .cmp_heading_text {
    color: #555555;
    }
}
.headingTextBox-bordered {
    .cmp_heading_textbox {
    border: 2px solid #00b2b2;
    }
}
.headingText-center {
    .cmp_heading_text {
    text-align: center;
    }
}

Once done content author can create styling by adding styles to the component via component policy.
Something like this 👇

Once done you can see pencil ✎ symbol in your component which shows different styles assigned.