.eslintrc.cjs

module.exports = {
  "root": true,
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:wc/recommended",
    "plugin:lit/all",
    "plugin:storybook/recommended",
    "prettier",
    "plugin:testing-library/dom"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module",
  },
  "plugins": [
    "@typescript-eslint",
    "testing-library"
  ],
  "env": {
    "browser": true
  },
  "rules": {
    "no-prototype-builtins": "off",
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/no-explicit-any": "error",
    "@typescript-eslint/no-empty-function": "off",
    "@typescript-eslint/no-non-null-assertion": "off",
    "@typescript-eslint/no-unused-vars": ["warn", {
      "argsIgnorePattern": "^_"
    }],
    "storybook/context-in-play-function": "off"
  },
  "overrides": [{
    "files": ["rollup.config.js", "web-test-runner.config.js", ".eslintrc.cjs", "*.cjs", ".storybook/*.cjs", "sb-addons/**/*"],
    "rules": {
      "@typescript-eslint/no-var-requires": "off"
    },
    "env": {
      "node": true
    }
  }, {
    "files": ["*_test.ts", "**/custom_typings/*.ts", "packages/labs/ssr/src/test/integration/tests/**", "packages/labs/ssr/src/lib/util/parse5-utils.ts"],
    "rules": {
      "@typescript-eslint/no-explicit-any": "off"
    }
  }]
};

jio-socialmedia-buttons.ts

import {LitElement, TemplateResult, html, nothing} from 'lit';
import {customElement, property} from 'lit/decorators.js';
import styles from './jio-socialmedia-buttons.css';

@customElement('jio-socialmedia-buttons')
export class SocialMediaButtons extends LitElement {
  static override styles = [styles];

  @property({type: String})
  twitter = "";

  @property({type: String})
  github = "";

  @property({type: String})
  blog = "";

  @property({type: String})
  linkedin = "";

  override render() {
    const _twitter: TemplateResult | symbol = !this.twitter ? nothing : html`<li><a href=${`https://twitter.com/${this.twitter}`} target="_blank" rel="noreferrer noopener">Twitter</a></li>`;
    const _github: TemplateResult | symbol = !this.github ? nothing : html`<li><a href=${`https://github.com/${this.github}`} target="_blank" rel="noreferrer noopener">Github</a></li>`;
    const _blog: TemplateResult | symbol = !this.blog ? nothing : html`<li><a href=${this.blog} target="_blank" rel="noreferrer noopener">Blog</a></li>`;
    const _linkedin: TemplateResult | symbol = nothing;
    if (this.linkedin) {
      _linkedin = html`<li><a href=${`https://www.linkedin.com/in/${this.linkedin}`} target="_blank" rel="noreferrer noopener">LinkedIn</a></li>`;
    }
    return html`
      <ul>
        ${_github}${_twitter}${_blog}${_linkedin}
      </ul>
    `;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'jio-socialmedia-buttons': SocialMediaButtons;
  }
}