refactor(pie-cookie-banner): DSW-2280 small type / linting changes (#…

…1951)

.changeset/eight-beds-camp.md

@@ -0,0 +1,5 @@
+---
+"@justeattakeaway/pie-cookie-banner": patch
+---
+
+[Changed] - Small type/linting changes

packages/components/pie-cookie-banner/src/defs-react.ts

@@ -1,3 +1,3 @@
-import React from 'react';
+import type React from 'react';
 
-export type ReactBaseType = React.HTMLAttributes<HTMLElement>
+export type ReactBaseType = React.HTMLAttributes<HTMLElement>;

packages/components/pie-cookie-banner/src/defs.ts

@@ -49,6 +49,7 @@ export interface CookieBannerProps {
      * When true, sets the variant to "primary" for the button which accepts necessary cookies only.
      */
     hasPrimaryActionsOnly: boolean;
+
     /**
      * Assigns the data for localising the component strings
      */

packages/components/pie-cookie-banner/src/index.ts

@@ -1,5 +1,5 @@
 import {
-    LitElement, html, unsafeCSS, TemplateResult, nothing,
+    LitElement, html, unsafeCSS, nothing,
 } from 'lit';
 import { property, state, queryAll } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
@@ -9,21 +9,19 @@ import '@justeattakeaway/pie-divider';
 import '@justeattakeaway/pie-icon-button';
 import '@justeattakeaway/pie-link';
 import '@justeattakeaway/pie-modal';
-/* eslint-disable import/no-duplicates */
 import '@justeattakeaway/pie-switch';
-import { PieSwitch } from '@justeattakeaway/pie-switch';
+import { type PieSwitch } from '@justeattakeaway/pie-switch';
 import { defineCustomElement, dispatchCustomEvent } from '@justeattakeaway/pie-webc-core';
-/* eslint-enable import/no-duplicates */
 
 import styles from './cookie-banner.scss?inline';
 import {
-    CookieBannerProps,
     ON_COOKIE_BANNER_ACCEPT_ALL,
     ON_COOKIE_BANNER_NECESSARY_ONLY,
     ON_COOKIE_BANNER_MANAGE_PREFS,
     ON_COOKIE_BANNER_PREFS_SAVED,
     defaultProps,
     preferences,
+    type CookieBannerProps,
     type Preference,
     type PreferenceIds,
     type CookieBannerLocale,
@@ -55,7 +53,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
     public hasPrimaryActionsOnly = defaultProps.hasPrimaryActionsOnly;
 
     @property({ type: Object })
-    public defaultPreferences: CookieBannerProps['defaultPreferences'] = defaultProps.defaultPreferences;
+    public defaultPreferences = defaultProps.defaultPreferences;
 
     @property({ type: Object })
     public locale:CookieBannerLocale = defaultProps.locale;
@@ -78,11 +76,11 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
         linkCookieTechList: (tagContent: string) => html`<pie-link href="${this.cookieTechnologiesLink}" size="small" target="_blank" data-test-id="cookie-technology-link">${tagContent}</pie-link>`,
     };
 
-    private _localiseText (key:string):string {
+    private _localiseText (key: string) {
         return localiseText(this.locale, key);
     }
 
-    private _localiseRichText (key:string):Array<string|TemplateResult> {
+    private _localiseRichText (key: string) {
         return localiseRichText(this.locale, key, this._customTagEnhancers);
     }
 
@@ -173,7 +171,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
      */
     private renderPreference ({
         id, checked, disabled, hasDivider, hasDescription,
-    }: Preference): TemplateResult {
+    }: Preference) {
         const title = this._localiseText(`preferencesManagement.${id}.title`);
         const descriptionLocaleKey = `preferencesManagement.${id}.description`;
         // Ensure not to display fallback text as description as its expected that some items might not have its own description
@@ -203,7 +201,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
      * Renders the modal content.
      * @private
      */
-    private renderModalContent (): TemplateResult {
+    private renderModalContent () {
         return html`
             <p class="c-cookieBanner-description" data-test-id="modal-description">
                 ${this._localiseRichText('preferencesManagement.description')}
@@ -261,7 +259,7 @@ export class PieCookieBanner extends LitElement implements CookieBannerProps {
                     @click="${this._openManagePreferencesModal}"
                     tag="button"
                     variant="inverse"
-                    isBold="true">
+                    isBold>
                     ${this._localiseText('banner.cta.managePreferences')}
                 </pie-link>
             </div>

packages/components/pie-cookie-banner/src/localisation-utils.ts

@@ -1,11 +1,6 @@
-import {
-    TemplateResult,
-} from 'lit';
-
-import {
-    type CookieBannerLocale,
-    type CustomTagEnhancers,
-} from './defs';
+import { type TemplateResult } from 'lit';
+
+import { type CookieBannerLocale, type CustomTagEnhancers } from './defs';
 
 function logError (message:string):void {
     console.error(`[localisation-utils]: ${message}`);

packages/components/pie-cookie-banner/test/accessibility/pie-cookie-banner.spec.ts

@@ -1,4 +1,3 @@
-
 import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts';
 import { CookieBannerComponent } from '../helpers/page-object/pie-cookie-banner.page.ts';
 

packages/components/pie-cookie-banner/test/component/pie-cookie-banner.spec.ts

@@ -1,10 +1,12 @@
 import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/playwright-fixtures.ts';
 import { readFile } from 'fs/promises';
-import { CookieBannerComponent, Level } from 'test/helpers/page-object/pie-cookie-banner.page.ts';
+import { CookieBannerComponent, type Level } from 'test/helpers/page-object/pie-cookie-banner.page.ts';
 import { ModalComponent } from '@justeattakeaway/pie-modal/test/helpers/page-object/pie-modal.page.ts';
 import {
-    ON_COOKIE_BANNER_ACCEPT_ALL, ON_COOKIE_BANNER_NECESSARY_ONLY,
-    ON_COOKIE_BANNER_MANAGE_PREFS, ON_COOKIE_BANNER_PREFS_SAVED,
+    ON_COOKIE_BANNER_ACCEPT_ALL,
+    ON_COOKIE_BANNER_NECESSARY_ONLY,
+    ON_COOKIE_BANNER_MANAGE_PREFS,
+    ON_COOKIE_BANNER_PREFS_SAVED,
     preferences,
 } from '../../src/defs.ts';
 

packages/components/pie-cookie-banner/test/helpers/page-object/pie-cookie-banner.page.ts

@@ -1,11 +1,8 @@
 import { type Locator, type Page } from '@playwright/test';
 import { BasePage } from '@justeattakeaway/pie-webc-testing/src/helpers/page-object/base-page.ts';
-import {
-    cookieBanner,
-} from './selectors.ts';
-import {
-    PreferenceIds,
-} from '../../../src/defs.ts';
+
+import { cookieBanner } from './selectors.ts';
+import { type PreferenceIds } from '../../../src/defs.ts';
 
 const getPreferenceItemSelector = (id: PreferenceIds) => `#${id} [data-test-id="switch-component"]`;
 

packages/components/pie-cookie-banner/test/unit/localisation-utils.test.ts

@@ -1,9 +1,3 @@
-import {
-    describe,
-    it,
-    expect,
-} from 'vitest';
-
 import { localiseText, localiseRichText } from '../../src/localisation-utils';
 
 describe('localiseText', () => {

packages/components/pie-cookie-banner/test/visual/pie-cookie-banner.spec.ts

@@ -1,24 +1,19 @@
-
 import { test } from '@sand4rt/experimental-ct-web';
 import percySnapshot from '@percy/playwright';
 
-import { PieCookieBanner, CookieBannerProps } from '../../src/index.ts';
+import { PieCookieBanner, type CookieBannerProps } from '../../src/index.ts';
 
 const managePrefsSelector = '[data-test-id="actions-manage-prefs"]';
 
 test.describe('PieCookieBanner - Visual tests`', () => {
     test('should display the PieCookieBanner component successfully', async ({ page, mount }) => {
-        await mount(PieCookieBanner, {
-            props: {} as CookieBannerProps,
-        });
+        await mount(PieCookieBanner);
 
         await percySnapshot(page, 'PieCookieBanner - Visual Test');
     });
 
     test('should display the manage preferences modal after clicking `"Manage preferences"`', async ({ page, mount }) => {
-        await mount(PieCookieBanner, {
-            props: {} as CookieBannerProps,
-        });
+        await mount(PieCookieBanner);
 
         await page.click(managePrefsSelector);