deven-org · angsherpa456 · Mar 22, 2024 · Mar 8, 2024
diff --git a/docs/ARCHITECTURE.md b/docs/ARCHITECTURE.md
@@ -62,7 +62,7 @@ The changes made in project's code base adheres to a continuous integration and
 This section lists all technical decisions. It includes explanations of the frameworks, tools and languages that are used in the project. It also includes the main reasons for these decisions.
 
 ### Web Components
-Our design system includes a wide range of reusable UI components, each carefully designed and implemented using the [Lit](https://lit.dev/docs/) template. These web components cover various aspects of our application's user interface, including buttons, input fields, tab bars, divider, and more. The reason for using Lit was that it being a straightforward library designed for constructing rapid, lightweight web components. Furthermore, it provides the developers a component base class that eliminates boilerplate code, offering reactive state, scoped styles, and a declarative template system. This system is characterized by its compact size, swift performance, and expressive nature.
+Our design system includes a wide range of reusable UI components, each carefully designed and implemented using the [Lit](https://lit.dev/docs/) template. These web components cover various aspects of our application's user interface, including buttons, input fields, tab bars, divider, and more. The reason for using Lit was that it being a straightforward library designed for constructing rapid, lightweight web components. Furthermore, it provides the developers a component base class that eliminates boilerplate code, offering reactive state, scoped styles, and a declarative template system. This system is characterized by its compact size, swift performance, and expressive nature. In our project, every component utilizes LitElementCustom instead of the base LitElement. This custom variant offers tailored functionality and optimizations designed to meet our project's requirements precisely. As a result, it's imperative to consistently employ LitElementCustom for any new components added to the codebase. To enforce this standardization, we've implemented a linting rule, no-restricted-imports, ensuring adherence across the team.
 
 ### Styles
 The design system provides a comprehensive set of styles, including typography, colors, spacing, and layout guidelines. These styles are meticulously crafted to maintain visual coherence and enhance the overall user experience.

diff --git a/packages/js-example-app/src/index.ejs b/packages/js-example-app/src/index.ejs
@@ -7,7 +7,7 @@
   </head>
   <body>
     <div class="logoWrapper">
-      <img src="js-example-app/logo.svg" width="200" height="100" alt="boiler" />
+      <img src="./logo.svg" width="200" height="100" alt="boiler" />
       <h2>Vanilla JS Example Application</h2>
     </div>
 
@@ -18,12 +18,12 @@
           <blr-button-text
             theme="Light"
             variant="cta"
-            sizeVariant="md"
+            size-variant="md"
             label="Button"
-            hasIcon="true"
-            iconPosition="leading"
+            has-icon="true"
+            icon-position="leading"
             icon="blr360"
-            buttonTextId="button-id"
+            button-text-id="button-id"
           ></blr-button-text>
           <button id="toggleLoadingState">Toggle Loading State</button>
           <button id="toggleDisabledState">Toggle Disabled State</button>
@@ -44,34 +44,33 @@
 
         <div class="component">
           <p>Checkbox</p>
-          <blr-checkbox hasLabel="true" label="Please check" checkInputId="Test123"></blr-checkbox>
+          <blr-checkbox has-label="true" label="Please check" check-input-id="Test123"></blr-checkbox>
         </div>
 
         <div class="component">
           <p>Input Field Text</p>
-          <blr-input-field-text placeholder="Enter text..." value="" hintText="Hint"></blr-input-field-text>
+          <blr-input-field-text placeholder="Enter text..." value="" hint-text="Hint"></blr-input-field-text>
         </div>
 
         <div class="component">
           <p>Input Field Number</p>
           <blr-input-field-number
             value="1000"
             size="md"
-            steppervariant="vertical"
+            stepper-variant="vertical"
             placeholder="Placeholder-text"
-            fractiondigits="10"
-            totaldigits="10"
-            prependunit="true"
+            total-digits="10"
+            prepend-unit="true"
             unit="kg"
             step="1"
-            haslabel="true"
+            has-label="true"
             label="Label-text"
-            labelappendix="(Appendix)"
-            inputfieldnumberid="test-id"
+            label-appendix="(Appendix)"
+            input-field-number-id="test-id"
             theme="Light"
             name="InputFieldNumber"
             decimals="10"
-            leadingzeros="3"
+            leading-zeros="3"
           ></blr-input-field-number>
         </div>
 
@@ -80,13 +79,13 @@
           <blr-textarea
             placeholder="Enter text..."
             value=""
-            showHint="true"
-            hintText="Hint"
+            show-hint="true"
+            hint-text="Hint"
             resize="both"
-            hasCounter="true"
-            maxLength="140"
-            warningLimitType="warningLimitInt"
-            warningLimitInt="105"
+            has-counter="true"
+            max-length="140"
+            warning-limit-type="warningLimitInt"
+            warning-limit-int="105"
           ></blr-textarea>
         </div>
 
@@ -97,7 +96,7 @@
             theme="Light"
             placement="top"
             elevation="true"
-            hasarrow="true"
+            has-arrow="true"
             offset="20"
             message="Message-text"
           >
@@ -113,25 +112,25 @@
         <div class="component">
           <p>Tab Bar</p>
           <blr-tab-bar
+            theme="Light"
             variant="standard"
-            overflowVariantStandard="buttons"
-            overflowVariantFullWidth="browserOverflow"
+            overflow-variant-standard="buttons"
             size="md"
-            showDivider="true"
-            tabContent="labelAndIcon"
-            iconPosition="leading"
+            show-divider="true"
+            tab-content="labelAndIcon"
+            icon-position="leading"
             alignment="left"
             ><p disabled label="Tab 1" icon="blr360">Tab 1</p>
-            <p label="Tab 2" icon="blrInfo">Tab 2</p>
-            <p label="Tab 3" icon="blrCrop">Tab 3</p>
-            <p label="Tab 4" icon="blrDocumentNew">Tab 4</p>
-            <p label="Tab 5" icon="blrDocumentTwo">Tab 5</p>
-            <p label="Tab 6" icon="blrDownload">Tab 6</p>
-            <p label="Tab 7" icon="blrHeart">Tab 7</p>
-            <p label="Tab 8" icon="blrHome">Tab 8</p>
-            <p label="Tab 9" icon="blrLockClosed">Tab 9</p>
-            <p label="Tab 10" icon="blrMusic">Tab 10</p>
-            <p label="Tab 11" icon="blrPen">Tab 11</p>
+            <p label="Tab 2" icon="blr360">Tab 2</p>
+            <p label="Tab 3" icon="blr360">Tab 3</p>
+            <p label="Tab 4" icon="blr360">Tab 4</p>
+            <p label="Tab 5" icon="blr360">Tab 5</p>
+            <p label="Tab 6" icon="blr360">Tab 6</p>
+            <p label="Tab 7" icon="blr360">Tab 7</p>
+            <p label="Tab 8" icon="blr360">Tab 8</p>
+            <p label="Tab 9" icon="blr360">Tab 9</p>
+            <p label="Tab 10" icon="blr360">Tab 10</p>
+            <p label="Tab 11" icon="blr360">Tab 11</p>
           </blr-tab-bar>
         </div>
       </div>

diff --git a/packages/ui-library/.eslintrc.js b/packages/ui-library/.eslintrc.js
@@ -11,4 +11,18 @@ module.exports = {
   plugins: ['@typescript-eslint'],
   extends: ['../eslint-config-boiler'],
   ignorePatterns: ['types/', '*.svg', '*.scss', '*.css', '*.md', '*.config.mjs', '.*', 'webpack*.js'],
+  rules: {
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['lit'],
+            importNamePattern: 'LitElement',
+            message: `Don't use the default LitElement class. Import from /utils/lit-element-custom instead`,
+          },
+        ],
+      },
+    ],
+  },
 };
diff --git a/packages/ui-library/src/components/button-group/index.ts b/packages/ui-library/src/components/button-group/index.ts
@@ -1,12 +1,13 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleCustom } from './index.css';
 import { ButtonGroupAlignmentType, ButtonGroupSizesType } from '../../globals/types';
 
 import { TAG_NAME } from './renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrButtonGroup extends LitElement {
+export class BlrButtonGroup extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() sizeVariant: ButtonGroupSizesType = 'md';
@@ -31,4 +32,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrButtonGroup);
 }
 
-export type BlrButtonGroupType = Omit<BlrButtonGroup, keyof LitElement>;
+export type BlrButtonGroupType = Omit<BlrButtonGroup, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/button-icon/index.ts b/packages/ui-library/src/components/button-icon/index.ts
@@ -1,5 +1,5 @@
 /* eslint-disable no-console */
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property, state } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
@@ -21,6 +21,7 @@ import {
   createBlrClickEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 export type BlrButtonIconEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -33,7 +34,7 @@ export type BlrButtonIconEventHandlers = {
  * @fires blrBlur Button lost focus
  * @fires blrClick Button was clicked
  */
-export class BlrButtonIcon extends LitElement {
+export class BlrButtonIcon extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() arialabel!: string;
@@ -150,4 +151,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrButtonIcon);
 }
 
-export type BlrButtonIconType = Omit<BlrButtonIcon, keyof LitElement> & BlrButtonIconEventHandlers;
+export type BlrButtonIconType = Omit<BlrButtonIcon, keyof LitElementCustom> & BlrButtonIconEventHandlers;
diff --git a/packages/ui-library/src/components/button-text/index.ts b/packages/ui-library/src/components/button-text/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property, state } from 'lit/decorators.js';
 import { SizelessIconType } from '@boiler/icons';
@@ -27,6 +27,7 @@ import {
   createBlrClickEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 export type BlrButtonTextEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -39,7 +40,7 @@ export type BlrButtonTextEventHandlers = {
  * @fires blrBlur Button lost focus
  * @fires blrClick Button was clicked
  */
-export class BlrButtonText extends LitElement {
+export class BlrButtonText extends LitElementCustom {
   static styles = [styleCustom];
 
   @property() label = 'Button Label';
@@ -188,4 +189,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrButtonText);
 }
 
-export type BlrButtonTextType = Omit<BlrButtonText, keyof LitElement> & BlrButtonTextEventHandlers;
+export type BlrButtonTextType = Omit<BlrButtonText, keyof LitElementCustom> & BlrButtonTextEventHandlers;
diff --git a/packages/ui-library/src/components/checkbox/index.ts b/packages/ui-library/src/components/checkbox/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, html, nothing } from 'lit';
+import { html, nothing } from 'lit';
 import { property, query, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { TAG_NAME } from './renderFunction';
@@ -21,6 +21,7 @@ import {
   createBlrBlurEvent,
   createBlrFocusEvent,
 } from '../../globals/events';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 export type BlrCheckboxEventHandlers = {
   blrFocus?: (event: BlrFocusEvent) => void;
@@ -33,7 +34,7 @@ export type BlrCheckboxEventHandlers = {
  * @fires blrBlur Checkbox lost focus
  * @fires blrCheckedChange Checkbox state changed (event.checkState)
  */
-export class BlrCheckbox extends LitElement {
+export class BlrCheckbox extends LitElementCustom {
   static styles = [];
 
   @query('input')
@@ -316,4 +317,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrCheckbox);
 }
 
-export type BlrCheckboxType = Omit<BlrCheckbox, keyof LitElement> & BlrCheckboxEventHandlers;
+export type BlrCheckboxType = Omit<BlrCheckbox, keyof LitElementCustom> & BlrCheckboxEventHandlers;
diff --git a/packages/ui-library/src/components/counter/index.ts b/packages/ui-library/src/components/counter/index.ts
@@ -1,12 +1,13 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { CounterVariantType, FormSizesType } from '../../globals/types';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { counterLight, counterDark } from './index.css';
 import { TAG_NAME } from './renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrCounter extends LitElement {
+export class BlrCounter extends LitElementCustom {
   static styles = [];
 
   @property() variant: CounterVariantType = 'neutral';
@@ -39,4 +40,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrCounter);
 }
 
-export type BlrCounterType = Omit<BlrCounter, keyof LitElement>;
+export type BlrCounterType = Omit<BlrCounter, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/divider/index.ts b/packages/ui-library/src/components/divider/index.ts
@@ -1,12 +1,13 @@
-import { LitElement, html } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { dividerDark, dividerLight } from './index.css';
 import { TAG_NAME } from './renderFunction';
 import { ThemeType } from '../../foundation/_tokens-generated/index.themes';
 import { DividerVariationTypes } from '../../globals/types';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrDivider extends LitElement {
+export class BlrDivider extends LitElementCustom {
   @property() direction: DividerVariationTypes = 'vertical';
   @property() theme: ThemeType = 'Light';
 
@@ -31,4 +32,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrDivider);
 }
 
-export type BlrDividerType = Omit<BlrDivider, keyof LitElement>;
+export type BlrDividerType = Omit<BlrDivider, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/form-caption-group/index.ts b/packages/ui-library/src/components/form-caption-group/index.ts
@@ -1,13 +1,14 @@
-import { html, LitElement } from 'lit';
+import { html } from 'lit';
 import { property } from 'lit/decorators.js';
 
 import { FormSizesType } from '../../globals/types';
 import { classMap } from 'lit/directives/class-map.js';
 import { formCaptionGroupStyle } from './index.css';
 
 import { TAG_NAME } from './renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrFormCaptionGroup extends LitElement {
+export class BlrFormCaptionGroup extends LitElementCustom {
   static styles = [formCaptionGroupStyle];
 
   @property() sizeVariant: FormSizesType = 'md';
@@ -30,4 +31,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrFormCaptionGroup);
 }
 
-export type BlrFormCaptionGroupType = Omit<BlrFormCaptionGroup, keyof LitElement>;
+export type BlrFormCaptionGroupType = Omit<BlrFormCaptionGroup, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/form-caption/index.ts b/packages/ui-library/src/components/form-caption/index.ts
@@ -1,4 +1,4 @@
-import { LitElement, TemplateResult, html, nothing } from 'lit';
+import { TemplateResult, html, nothing } from 'lit';
 import { property } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { TAG_NAME } from './renderFunction';
@@ -9,8 +9,9 @@ import { CaptionVariantType, FormSizesType, SizesType } from '../../globals/type
 import { calculateIconName } from '../../utils/calculate-icon-name';
 import { getComponentConfigToken } from '../../utils/get-component-config-token';
 import { BlrIconRenderFunction } from '../icon/renderFunction';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
-export class BlrFormCaption extends LitElement {
+export class BlrFormCaption extends LitElementCustom {
   static styles = [];
 
   @property() message?: string;
@@ -75,4 +76,4 @@ if (!customElements.get(TAG_NAME)) {
   customElements.define(TAG_NAME, BlrFormCaption);
 }
 
-export type BlrFormCaptionType = Omit<BlrFormCaption, keyof LitElement>;
+export type BlrFormCaptionType = Omit<BlrFormCaption, keyof LitElementCustom>;
diff --git a/packages/ui-library/src/components/form-label/index.stories.ts b/packages/ui-library/src/components/form-label/index.stories.ts
@@ -4,9 +4,9 @@ import { FormSizes } from '../../globals/constants';
 import { BlrFormLabelType } from './index';
 import { BlrFormLabelRenderFunction } from './renderFunction';
 import { html } from 'lit-html';
-import { LitElement } from 'lit';
 import { genericBlrComponentRenderer } from '../../utils/typesafe-generic-component-renderer';
 import '../../index';
+import { LitElementCustom } from '../../utils/lit-element-custom';
 
 const sharedStyles = html`
   <style>
@@ -107,7 +107,7 @@ export default {
 
 // The label is not creating a shadow root itself, but errors if it is outside
 // of one. Thus, we're creating a helper component for the stories, that wraps it.
-class WrappedBlrLabel extends LitElement {
+class WrappedBlrLabel extends LitElementCustom {
   labelProps: BlrFormLabelType;
 
   protected render() {