From 8a12ac58a83a501e441d859af9e5719259a0e4c2 Mon Sep 17 00:00:00 2001 From: Xander Marjoram Date: Tue, 1 Oct 2024 12:50:41 +0100 Subject: [PATCH] refactor(pie-cookie-banner): DSW-2280 small type / linting changes (#1951) --- .changeset/eight-beds-camp.md | 5 +++++ .../pie-cookie-banner/src/defs-react.ts | 4 ++-- .../components/pie-cookie-banner/src/defs.ts | 1 + .../components/pie-cookie-banner/src/index.ts | 20 +++++++++---------- .../src/localisation-utils.ts | 11 +++------- .../accessibility/pie-cookie-banner.spec.ts | 1 - .../test/component/pie-cookie-banner.spec.ts | 8 +++++--- .../page-object/pie-cookie-banner.page.ts | 9 +++------ .../test/unit/localisation-utils.test.ts | 6 ------ .../test/visual/pie-cookie-banner.spec.ts | 11 +++------- 10 files changed, 31 insertions(+), 45 deletions(-) create mode 100644 .changeset/eight-beds-camp.md diff --git a/.changeset/eight-beds-camp.md b/.changeset/eight-beds-camp.md new file mode 100644 index 0000000000..40445cd727 --- /dev/null +++ b/.changeset/eight-beds-camp.md @@ -0,0 +1,5 @@ +--- +"@justeattakeaway/pie-cookie-banner": patch +--- + +[Changed] - Small type/linting changes diff --git a/packages/components/pie-cookie-banner/src/defs-react.ts b/packages/components/pie-cookie-banner/src/defs-react.ts index 3ea46b95e8..9d9d99125d 100644 --- a/packages/components/pie-cookie-banner/src/defs-react.ts +++ b/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 +export type ReactBaseType = React.HTMLAttributes; diff --git a/packages/components/pie-cookie-banner/src/defs.ts b/packages/components/pie-cookie-banner/src/defs.ts index 6c26c40c04..6689e09a33 100644 --- a/packages/components/pie-cookie-banner/src/defs.ts +++ b/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 */ diff --git a/packages/components/pie-cookie-banner/src/index.ts b/packages/components/pie-cookie-banner/src/index.ts index e21360559d..69eea4a7bc 100644 --- a/packages/components/pie-cookie-banner/src/index.ts +++ b/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`${tagContent}`, }; - private _localiseText (key:string):string { + private _localiseText (key: string) { return localiseText(this.locale, key); } - private _localiseRichText (key:string):Array { + 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`

${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')} diff --git a/packages/components/pie-cookie-banner/src/localisation-utils.ts b/packages/components/pie-cookie-banner/src/localisation-utils.ts index 34c879c35c..4072812c72 100644 --- a/packages/components/pie-cookie-banner/src/localisation-utils.ts +++ b/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}`); diff --git a/packages/components/pie-cookie-banner/test/accessibility/pie-cookie-banner.spec.ts b/packages/components/pie-cookie-banner/test/accessibility/pie-cookie-banner.spec.ts index ee095f9b3c..76622b0fbd 100644 --- a/packages/components/pie-cookie-banner/test/accessibility/pie-cookie-banner.spec.ts +++ b/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'; diff --git a/packages/components/pie-cookie-banner/test/component/pie-cookie-banner.spec.ts b/packages/components/pie-cookie-banner/test/component/pie-cookie-banner.spec.ts index f357544902..073c730567 100644 --- a/packages/components/pie-cookie-banner/test/component/pie-cookie-banner.spec.ts +++ b/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'; diff --git a/packages/components/pie-cookie-banner/test/helpers/page-object/pie-cookie-banner.page.ts b/packages/components/pie-cookie-banner/test/helpers/page-object/pie-cookie-banner.page.ts index 0f3be42812..472407b180 100644 --- a/packages/components/pie-cookie-banner/test/helpers/page-object/pie-cookie-banner.page.ts +++ b/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"]`; diff --git a/packages/components/pie-cookie-banner/test/unit/localisation-utils.test.ts b/packages/components/pie-cookie-banner/test/unit/localisation-utils.test.ts index 5499e90a0f..d9645da2d7 100644 --- a/packages/components/pie-cookie-banner/test/unit/localisation-utils.test.ts +++ b/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', () => { diff --git a/packages/components/pie-cookie-banner/test/visual/pie-cookie-banner.spec.ts b/packages/components/pie-cookie-banner/test/visual/pie-cookie-banner.spec.ts index d7863af4a5..a30bd496e2 100644 --- a/packages/components/pie-cookie-banner/test/visual/pie-cookie-banner.spec.ts +++ b/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);