Merge pull request #955 from ing-bank/feat/choice-types

feat: add types for checkbox-group & radio-group

.changeset/early-houses-punch.md

@@ -0,0 +1,5 @@
+---
+'@lion/radio-group': minor
+---
+
+Added types for the radio-group package.

.changeset/shaggy-dolls-trade.md

@@ -0,0 +1,5 @@
+---
+'@lion/checkbox-group': minor
+---
+
+Added types for checkbox-group package.

.eslintrc.js

@@ -1,6 +1,12 @@
 module.exports = {
   extends: ['@open-wc/eslint-config', 'eslint-config-prettier'].map(require.resolve),
   overrides: [
+    {
+      files: ['**/*.js'],
+      rules: {
+        'wc/guard-super-call': 'off', // types will prevent you from calling the super if it's not in the base class, making the guard unnecessary
+      },
+    },
     {
       files: [
         '**/test-suites/**/*.js',

packages/checkbox-group/src/LionCheckbox.js

@@ -3,7 +3,7 @@ import { ChoiceInputMixin } from '@lion/form-core';
 
 export class LionCheckbox extends ChoiceInputMixin(LionInput) {
   connectedCallback() {
-    if (super.connectedCallback) super.connectedCallback();
+    super.connectedCallback();
     this.type = 'checkbox';
   }
 }

packages/checkbox-group/src/LionCheckboxGroup.js

@@ -3,15 +3,15 @@ import { ChoiceGroupMixin, FormGroupMixin } from '@lion/form-core';
 
 /**
  * A wrapper around multiple checkboxes
- *
- * @extends {LionFieldset}
  */
+// @ts-expect-error https://github.com/microsoft/TypeScript/issues/40110
 export class LionCheckboxGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {
   constructor() {
     super();
     this.multipleChoice = true;
   }
 
+  /** @param {import('lit-element').PropertyValues } changedProperties */
   updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has('name') && !String(this.name).match(/\[\]$/)) {

packages/checkbox-group/test/lion-checkbox-group.test.js

@@ -1,8 +1,15 @@
 import { localizeTearDown } from '@lion/localize/test-helpers.js';
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture as _fixture, html } from '@open-wc/testing';
 import '../lion-checkbox-group.js';
 import '../lion-checkbox.js';
 
+/**
+ * @typedef {import('../src/LionCheckboxGroup').LionCheckboxGroup} LionCheckboxGroup
+ * @typedef {import('lit-html').TemplateResult} TemplateResult
+ */
+
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionCheckboxGroup>} */ (_fixture);
+
 beforeEach(() => {
   localizeTearDown();
 });

packages/radio-group/src/LionRadio.js

@@ -19,11 +19,10 @@ import { LionInput } from '@lion/input';
  *   <lion-radio checked>
  *
  * @customElement lion-radio
- * @extends {LionInput}
  */
 export class LionRadio extends ChoiceInputMixin(LionInput) {
   connectedCallback() {
-    if (super.connectedCallback) super.connectedCallback();
+    super.connectedCallback();
     this.type = 'radio';
   }
 }

packages/radio-group/src/LionRadioGroup.js

@@ -3,12 +3,10 @@ import { ChoiceGroupMixin, FormGroupMixin } from '@lion/form-core';
 
 /**
  * A wrapper around multiple radios.
- *
- * @extends {LionFieldset}
  */
+// @ts-expect-error https://github.com/microsoft/TypeScript/issues/40110
 export class LionRadioGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {
   connectedCallback() {
-    // eslint-disable-next-line wc/guard-super-call
     super.connectedCallback();
     this.setAttribute('role', 'radiogroup');
   }

packages/radio-group/test/lion-radio-group.test.js

@@ -1,8 +1,15 @@
-import { expect, fixture, html } from '@open-wc/testing';
+import { expect, fixture as _fixture, html } from '@open-wc/testing';
 
 import '../lion-radio-group.js';
 import '../lion-radio.js';
 
+/**
+ * @typedef {import('../src/LionRadioGroup').LionRadioGroup} LionRadioGroup
+ * @typedef {import('../src/LionRadio').LionRadio} LionRadio
+ * @typedef {import('lit-html').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionRadioGroup>} */ (_fixture);
+
 describe('<lion-radio-group>', () => {
   it('should have role = radiogroup', async () => {
     const el = await fixture(html`
@@ -24,7 +31,7 @@ describe('<lion-radio-group>', () => {
 
     el.children[1].focus();
     expect(el.touched).to.equal(false, 'initially, touched state is false');
-    el.children[1].checked = true;
+    /** @type {LionRadio} */ (el.children[1]).checked = true;
     expect(el.touched, `focused via a mouse click, group should be touched`).to.be.true;
   });
 

tsconfig.json

@@ -16,17 +16,19 @@
   },
   "include": [
     "packages/accordion/**/*.js",
-    "packages/core/**/*.js",
-    "packages/tabs/**/*.js",
-    "packages/singleton-manager/**/*.js",
-    "packages/localize/**/*.js",
-    "packages/form-core/**/*.js",
-    "packages/overlays/**/*.js",
-    "packages/tooltip/**/*.js",
     "packages/button/src/**/*.js",
-    "packages/listbox/src/*.js",
+    "packages/checkbox-group/**/*.js",
+    "packages/core/**/*.js",
+    "packages/form-core/**/*.js",
     "packages/input/**/*.js",
-    "packages/input-amount/**/*.js"
+    "packages/input-amount/**/*.js",
+    "packages/listbox/src/*.js",
+    "packages/localize/**/*.js",
+    "packages/overlays/**/*.js",
+    "packages/radio-group/**/*.js",
+    "packages/singleton-manager/**/*.js",
+    "packages/tabs/**/*.js",
+    "packages/tooltip/**/*.js"
   ],
   "exclude": [
     "node_modules",