From 8c757d08812614988bc83c4c748306b8ac1c1194 Mon Sep 17 00:00:00 2001 From: Josh Ng Date: Wed, 27 Mar 2024 16:01:08 +0000 Subject: [PATCH 1/2] refactor(pie-modal): DSW-000 pie modal page object refactor (#1359) * refactor(pie-modal): DSW-000 refactored page object to match cookie banner * format(pie-modal): DSW-000 updated page object name * format(pie-cookie-banner): DSW-000 updated naming for cookie banner and modal page object * chore(pie-modal): DSW-000 updated modal naming * format(pie-modal): DSW-000 expect naming conventions --- .../test/component/pie-cookie-banner.spec.ts | 12 +- .../page-object/pie-cookie-banner.page.ts | 2 +- .../test/component/pie-modal.spec.ts | 167 ++++++++++-------- .../helpers/page-object/pie-modal.page.ts | 95 +++++++--- 4 files changed, 173 insertions(+), 103 deletions(-) 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 84d6de1c8a..26440c0b1a 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,8 +1,8 @@ import { test, expect } from '@sand4rt/experimental-ct-web'; import { readFile } from 'fs/promises'; -import { PieCookieBannerComponent, Level } from 'test/helpers/page-object/pie-cookie-banner.page.ts'; -import { PieModalPage } from '@justeattakeaway/pie-modal/test/helpers/page-object/pie-modal.page.ts'; +import { CookieBannerComponent, 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, @@ -19,13 +19,13 @@ function stripTags (str: string) { return str.replace(/<\/?[^>]+(>|$)/g, ''); } -let pieCookieBannerComponent: PieCookieBannerComponent; -let pieModalComponent: PieModalPage; +let pieCookieBannerComponent: CookieBannerComponent; +let pieModalComponent: ModalComponent; test.describe('PieCookieBanner - Component tests', () => { test.beforeEach(async ({ page }) => { - pieCookieBannerComponent = new PieCookieBannerComponent(page); - pieModalComponent = new PieModalPage(page); + pieCookieBannerComponent = new CookieBannerComponent(page); + pieModalComponent = new ModalComponent(page); }); test('should render successfully', async ({ mount }) => { 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 80758dfd86..673c4be841 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 @@ -11,7 +11,7 @@ const getPreferenceItemSelector = (id: PreferenceIds) => `#${id} [data-test-id=" export type Level = 'action' | 'body'; -export class PieCookieBannerComponent extends BasePage { +export class CookieBannerComponent extends BasePage { private readonly componentLocator: Locator; private readonly descriptionLocator: Locator; private readonly acceptAllButtonLocator: Locator; diff --git a/packages/components/pie-modal/test/component/pie-modal.spec.ts b/packages/components/pie-modal/test/component/pie-modal.spec.ts index ababdd19d1..5590257d06 100644 --- a/packages/components/pie-modal/test/component/pie-modal.spec.ts +++ b/packages/components/pie-modal/test/component/pie-modal.spec.ts @@ -3,7 +3,7 @@ import { type Page } from '@playwright/test'; import { WebComponentTestWrapper, } from '@justeattakeaway/pie-webc-testing/src/helpers/components/web-component-test-wrapper/WebComponentTestWrapper.ts'; -import { PieModalPage } from 'test/helpers/page-object/pie-modal.page.ts'; +import { ModalComponent } from 'test/helpers/page-object/pie-modal.page.ts'; import { createScrollablePageHTML, renderTestPieModal } from '../helpers/index.ts'; import { PieModal } from '../../src/index.ts'; @@ -15,11 +15,11 @@ import { headingLevels, } from '../../src/defs.ts'; -let modalPage: PieModalPage; +let modalComponent: ModalComponent; test.describe('modal', () => { test.beforeEach(async ({ page }) => { - modalPage = new PieModalPage(page); + modalComponent = new ModalComponent(page); }); test('should be visible when opened', async ({ mount }) => { @@ -32,10 +32,10 @@ test.describe('modal', () => { }); // Act - const modal = await modalPage.isModalVisible(); + const isModalVisible = await modalComponent.isModalVisible(); // Assert - expect(modal).toBeTruthy(); + expect(isModalVisible).toBe(true); }); headingLevels.forEach((headingLevel) => test(`should render the correct heading tag based on the value of headingLevel: ${headingLevel}`, async ({ mount }) => { @@ -48,13 +48,11 @@ test.describe('modal', () => { // Act await mount(PieModal, { props }); - - await modalPage.isModalVisible(); - - const headingExists = await modalPage.headingByTagExists(headingLevel); + await modalComponent.isModalVisible(); + const headingExists = await modalComponent.headingByTagExists(headingLevel); // Assert - expect(headingExists).toBeTruthy(); + expect(headingExists).toBe(true); })); ['span', 'section'].forEach((headingLevel) => test(`should render the fallback heading level 'h2' if invalid headingLevel: ${headingLevel} is passed`, async ({ mount }) => { @@ -69,13 +67,11 @@ test.describe('modal', () => { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore // Added this as we want to deliberately test with invalid headingLevel (which is an invalid type based on ModalProps) await mount(PieModal, { props }); - - await modalPage.isModalVisible(); - - const fallBackHeadingExists = await modalPage.headingByTagExists('h2'); + await modalComponent.isModalVisible(); + const fallBackHeadingExists = await modalComponent.headingByTagExists('h2'); // Assert - expect(fallBackHeadingExists).toBeTruthy(); + expect(fallBackHeadingExists).toBe(true); })); test.describe('When modal is closed', () => { @@ -97,7 +93,7 @@ test.describe('modal', () => { }, ); - await modalPage.clickCloseModal(); + await modalComponent.clickCloseModal(); // Assert expect(events).toHaveLength(1); @@ -114,10 +110,11 @@ test.describe('modal', () => { }); // Act - await modalPage.clickCloseModal(); + await modalComponent.clickCloseModal(); + const isModalVisible = await modalComponent.isModalVisible(); // Assert - expect(await modalPage.isModalVisible()).toBeFalsy(); + expect(isModalVisible).toBe(false); }); }); @@ -138,7 +135,8 @@ test.describe('modal', () => { }, ); - await modalPage.clickBackModal(); + // Act + await modalComponent.clickBackModal(); // Assert expect(events).toHaveLength(1); @@ -161,7 +159,7 @@ test.describe('modal', () => { }); // Act - await modalPage.clickBackdrop(); + await modalComponent.clickBackdrop(); // Assert expect(events).toHaveLength(1); // TODO - Event object is null for this test @@ -177,10 +175,11 @@ test.describe('modal', () => { }); // Act - await modalPage.clickBackdrop(); + await modalComponent.clickBackdrop(); + const isModalVisible = await modalComponent.isModalVisible(); // Assert - expect(await modalPage.isModalVisible()).toBeFalsy(); + expect(isModalVisible).toBe(false); }); }); @@ -188,8 +187,6 @@ test.describe('modal', () => { test.describe('when given', () => { test('should return focus to specified element', async ({ mount, page }) => { // Arrange - const modalPage = new PieModalPage(page); - const component = renderTestPieModal({ returnFocusAfterCloseSelector: '#focus-me', }); @@ -209,9 +206,9 @@ test.describe('modal', () => { }); // Act - await modalPage.clickCloseModal(); + await modalComponent.clickCloseModal(); - const focusedElement = await page.locator(':focus'); + const focusedElement = page.locator(':focus'); const focusedElementId = await focusedElement.getAttribute('id'); // Assert @@ -220,8 +217,6 @@ test.describe('modal', () => { test('should return focus to first matching element', async ({ page, mount }) => { // Arrange - const modalPage = new PieModalPage(page); - const component = renderTestPieModal({ returnFocusAfterCloseSelector: '[data-test-id="focus-me"]', }); @@ -241,9 +236,9 @@ test.describe('modal', () => { }); // Act - await modalPage.clickCloseModal(); + await modalComponent.clickCloseModal(); - const focusedElement = await page.locator(':focus'); + const focusedElement = page.locator(':focus'); const focusedElementId = await focusedElement.getAttribute('id'); // Assert @@ -255,8 +250,8 @@ test.describe('modal', () => { [{ mechanism: 'close button', modalCloseFunction: async (page : Page) => { - const modalPage = new PieModalPage(page); - await modalPage.clickCloseModal(); + const modalComponent = new ModalComponent(page); + await modalComponent.clickCloseModal(); }, }, { mechanism: 'Esc key', @@ -293,7 +288,7 @@ test.describe('modal', () => { await page.click('[data-test-id="open-modal"]'); await modalCloseFunction(page); - const focusedElement = await page.locator(':focus'); + const focusedElement = page.locator(':focus'); const focusedElementId = await focusedElement.getAttribute('id'); // Assert @@ -319,8 +314,11 @@ test.describe('modal', () => { }, ); + // Act + const isCloseButtonVisible = await modalComponent.isCloseButtonVisible(); + // Assert - expect(await modalPage.isCloseButtonVisible()).toBeTruthy(); + expect(isCloseButtonVisible).toBe(true); }); test('should close the modal when the close button is clicked', async ({ mount }) => { @@ -336,10 +334,11 @@ test.describe('modal', () => { ); // Act - await modalPage.clickCloseModal(); + await modalComponent.clickCloseModal(); + const isModalVisible = await modalComponent.isModalVisible(); // Assert - expect(await modalPage.isModalVisible()).toBeFalsy(); + expect(isModalVisible).toBe(false); }); test('should close the modal when the backdrop is clicked', async ({ mount }) => { @@ -355,10 +354,11 @@ test.describe('modal', () => { ); // Act - await modalPage.clickBackdrop(); + await modalComponent.clickBackdrop(); + const isModalVisible = await modalComponent.isModalVisible(); // Assert - expect(await modalPage.isModalVisible()).toBeFalsy(); + expect(isModalVisible).toBe(false); }); test('should close the modal when the Escape key is pressed', async ({ mount, page }) => { @@ -370,13 +370,13 @@ test.describe('modal', () => { }, }); - await modalPage.isModalVisible(); - // Act + await modalComponent.isModalVisible(); await page.keyboard.press('Escape'); + const isModalVisible = await modalComponent.isModalVisible(); // Assert - expect(await modalPage.isModalVisible()).toBeFalsy(); + expect(isModalVisible).toBe(false); }); }); @@ -390,8 +390,11 @@ test.describe('modal', () => { }, }); + // Act + const isCloseButtonVisible = await modalComponent.isCloseButtonVisible(); + // Assert - expect(await modalPage.isCloseButtonVisible()).toBeFalsy(); + expect(isCloseButtonVisible).toBe(false); }); test('should NOT close the modal when the backdrop is clicked', async ({ mount }) => { @@ -407,10 +410,11 @@ test.describe('modal', () => { ); // Act - await modalPage.clickBackdrop(); + await modalComponent.clickBackdrop(); + const isModalVisible = await modalComponent.isModalVisible(); // Assert - expect(await modalPage.isModalVisible()).toBeTruthy(); + expect(isModalVisible).toBe(true); }); test('should NOT close the modal when the Escape key is pressed', async ({ mount, page }) => { @@ -424,9 +428,10 @@ test.describe('modal', () => { // Act await page.keyboard.press('Escape'); + const isModalVisible = await modalComponent.isModalVisible(); // Assert - expect(await modalPage.isModalVisible()).toBeTruthy(); + expect(isModalVisible).toBe(true); }); }); }); @@ -440,8 +445,11 @@ test.describe('modal', () => { }, }); + // Act + const isModalVisible = await modalComponent.isModalVisible(); + // Assert - expect(await modalPage.isModalVisible()).toBeFalsy(); + expect(isModalVisible).toBe(false); }); test('should render open when isOpen = true', async ({ mount }) => { @@ -452,15 +460,18 @@ test.describe('modal', () => { }, }); + // Act + const isModalVisible = await modalComponent.isModalVisible(); + // Assert - expect(await modalPage.isModalVisible()).toBeTruthy(); + expect(isModalVisible).toBe(true); }); }); test.describe('scrolling logic', () => { test('Should not be able to scroll when isOpen = true', async ({ mount, page }) => { // Arrange - const modalComponent = renderTestPieModal(); + const component = renderTestPieModal(); await mount( WebComponentTestWrapper, @@ -469,7 +480,7 @@ test.describe('modal', () => { pageMode: true, }, slots: { - component: modalComponent, + component, pageMarkup: createScrollablePageHTML(), }, }, @@ -489,7 +500,7 @@ test.describe('modal', () => { test('Should scroll to the bottom when Pie Modal is closed', async ({ mount, page }) => { // Arrange - const modalComponent = renderTestPieModal(); + const component = renderTestPieModal(); await mount( WebComponentTestWrapper, @@ -498,14 +509,14 @@ test.describe('modal', () => { pageMode: true, }, slots: { - component: modalComponent, + component, pageMarkup: createScrollablePageHTML(), }, }, ); // Act - await modalPage.clickCloseModal(); + await modalComponent.clickCloseModal(); // Scroll 800 pixels down the page await page.mouse.wheel(0, 5000); @@ -533,10 +544,12 @@ test.describe('modal', () => { }, ); - await modalPage.isModalVisible(); + // Act + await modalComponent.isModalVisible(); + const isModalVisible = await modalComponent.isBackButtonVisible(); - // Act & Assert - expect(await modalPage.isBackButtonVisible()).toBeTruthy(); + // Assert + expect(isModalVisible).toBe(true); }); test('should close the modal when the back button is clicked', async ({ mount }) => { @@ -552,10 +565,11 @@ test.describe('modal', () => { ); // Act - await modalPage.clickBackModal(); + await modalComponent.clickBackModal(); + const isModalVisible = await modalComponent.isModalVisible(); // Assert - expect(await modalPage.isModalVisible()).toBeFalsy(); + expect(isModalVisible).toBe(false); }); }); @@ -572,8 +586,11 @@ test.describe('modal', () => { }, ); + // Act + const isBackButtonVisible = await modalComponent.isBackButtonVisible(); + // Act & Assert - expect(await modalPage.isBackButtonVisible()).toBeFalsy(); + expect(isBackButtonVisible).toBe(false); }); }); }); @@ -600,13 +617,13 @@ test.describe('modal', () => { }, }); - await modalPage.isModalVisible(); - // Act - await modalPage.clickButtonWithText(action.buttonText); + await modalComponent.isModalVisible(); + await modalComponent.clickButtonWithText(action.buttonText); + const isModalVisible = await modalComponent.isModalVisible(); // Assert - expect(await modalPage.isModalVisible()).toBeFalsy(); + expect(isModalVisible).toBe(false); }); test('should submit the correct return value', async ({ mount }) => { @@ -638,7 +655,7 @@ test.describe('modal', () => { }); // Act - await modalPage.clickButtonWithText(action.buttonText); + await modalComponent.clickButtonWithText(action.buttonText); // Assert expect(events[0].eventName).toBe(action.name); @@ -667,10 +684,10 @@ test.describe('modal', () => { // Act // Close button - const ariaCloseLabel = await modalPage.getCloseButtonAriaLabel(); + const ariaCloseLabel = await modalComponent.getCloseButtonAriaLabel(); // Back button - const ariaBackLabel = await modalPage.getBackButtonAriaLabel(); + const ariaBackLabel = await modalComponent.getBackButtonAriaLabel(); // Assert expect(ariaCloseLabel).toBe('Close label info'); @@ -691,8 +708,8 @@ test.describe('modal', () => { }); // Loading state - const ariaLoadingLabel = await modalPage.getModalAriaLabel(); - const ariaLoadingBusy = await modalPage.getModalAriaBusy(); + const ariaLoadingLabel = await modalComponent.getModalAriaLabel(); + const ariaLoadingBusy = await modalComponent.getModalAriaBusy(); // Assert expect(ariaLoadingLabel).toBe('Loading label info'); @@ -713,8 +730,8 @@ test.describe('modal', () => { }, }); - let ariaLoadingLabel = await modalPage.getModalAriaLabel(); - let ariaLoadingBusy = await modalPage.getModalAriaBusy(); + let ariaLoadingLabel = await modalComponent.getModalAriaLabel(); + let ariaLoadingBusy = await modalComponent.getModalAriaBusy(); // Assert: When `isLoading: true` expect(ariaLoadingLabel).toBe('Loading label info'); @@ -722,8 +739,8 @@ test.describe('modal', () => { await component.update({ props: { isLoading: false } }); - ariaLoadingLabel = await modalPage.getModalAriaLabel(); - ariaLoadingBusy = await modalPage.getModalAriaBusy(); + ariaLoadingLabel = await modalComponent.getModalAriaLabel(); + ariaLoadingBusy = await modalComponent.getModalAriaBusy(); // Assert: When `isLoading: false` expect(ariaLoadingLabel).toBeNull(); @@ -745,10 +762,10 @@ test.describe('modal', () => { // Act // Close button - const ariaCloseLabel = await modalPage.getCloseButtonAriaLabel(); + const ariaCloseLabel = await modalComponent.getCloseButtonAriaLabel(); // Back button - const ariaBackLabel = await modalPage.getBackButtonAriaLabel(); + const ariaBackLabel = await modalComponent.getBackButtonAriaLabel(); // Assert expect(ariaCloseLabel).toBe(null); @@ -767,7 +784,7 @@ test.describe('modal', () => { }); // Loading state - const ariaLoadingLabel = await modalPage.getModalAriaLabel(); + const ariaLoadingLabel = await modalComponent.getModalAriaLabel(); // Assert expect(ariaLoadingLabel).toBe(null); @@ -783,7 +800,7 @@ test.describe('modal', () => { }); // Loading state - const ariaLoadingBusy = await modalPage.getModalAriaBusy(); + const ariaLoadingBusy = await modalComponent.getModalAriaBusy(); // Assert expect(ariaLoadingBusy).toBe('false'); diff --git a/packages/components/pie-modal/test/helpers/page-object/pie-modal.page.ts b/packages/components/pie-modal/test/helpers/page-object/pie-modal.page.ts index 608657c0a3..1c8d7f2c72 100644 --- a/packages/components/pie-modal/test/helpers/page-object/pie-modal.page.ts +++ b/packages/components/pie-modal/test/helpers/page-object/pie-modal.page.ts @@ -4,67 +4,120 @@ import { modal, } from './selectors.ts'; -export class PieModalPage extends BasePage { - readonly page: Page; - readonly componentLocator: Locator; - readonly backButtonLocator: Locator; - readonly closeButtonLocator: Locator; - readonly headerLocator: Locator; - readonly contentLocator: Locator; - readonly descriptionLocator: Locator; +export class ModalComponent extends BasePage { + private readonly componentLocator: Locator; + private readonly backButtonLocator: Locator; + private readonly closeButtonLocator: Locator; + private readonly headerLocator: Locator; + private readonly descriptionLocator: Locator; constructor (page: Page) { super(page); - this.page = page; this.componentLocator = page.getByTestId(modal.selectors.container.dataTestId); this.backButtonLocator = page.getByTestId(modal.selectors.backButton.dataTestId); this.closeButtonLocator = page.getByTestId(modal.selectors.closeButton.dataTestId); this.headerLocator = page.getByTestId(modal.selectors.header.dataTestId); - this.contentLocator = page.getByTestId(modal.selectors.content.dataTestId); this.descriptionLocator = page.getByTestId(modal.selectors.description.dataTestId); } - async isModalVisible () { + /** + * Checks whether the modal is currently visible. + * + * @returns {Promise} A Promise that resolves to `true` if the modal is visible, and `false` otherwise. + */ + async isModalVisible (): Promise { return this.componentLocator.isVisible(); } - async getModalAriaLabel () { + /** + * Retrieves the ARIA label of the modal. + * + * @returns {Promise} A Promise that resolves to the ARIA label of the modal, or `null` if the ARIA label attribute is not found. + */ + async getModalAriaLabel (): Promise { return this.componentLocator.getAttribute('aria-label'); } - async getModalAriaBusy () { + /** + * Retrieves the value of the ARIA busy attribute of the modal. + * + * @returns {Promise} A Promise that resolves to the value of the ARIA busy attribute of the modal, + * or `null` if the attribute is not found. + */ + async getModalAriaBusy (): Promise { return this.componentLocator.getAttribute('aria-busy'); } - async clickCloseModal () { + /** + * Clicks the close button of the modal. + * + * @returns {Promise} A Promise that resolves once the close button of the modal has been successfully clicked. + */ + async clickCloseModal (): Promise { await this.closeButtonLocator.click(); } - async isCloseButtonVisible () { + /** + * Checks whether the close button of the modal is currently visible. + * + * @returns {Promise} A Promise that resolves to `true` if the close button of the modal is visible, and `false` otherwise. + */ + async isCloseButtonVisible (): Promise { return this.closeButtonLocator.isVisible(); } - async getCloseButtonAriaLabel () { + /** + * Retrieves the ARIA label of the close button of the modal. + * + * @returns {Promise} A Promise that resolves to the ARIA label of the close button of the modal, or `null` if the ARIA label attribute is not found. + */ + async getCloseButtonAriaLabel (): Promise { return this.closeButtonLocator.getAttribute('aria-label'); } - async clickBackModal () { + /** + * Clicks the back button of the modal. + * + * @returns {Promise} A Promise that resolves once the back button of the modal has been successfully clicked. + */ + async clickBackModal (): Promise { await this.backButtonLocator.click(); } - async isBackButtonVisible () { + /** + * Checks whether the back button of the modal is currently visible. + * + * @returns {Promise} A Promise that resolves to `true` if the back button of the modal is visible, and `false` otherwise. + */ + async isBackButtonVisible (): Promise { return this.backButtonLocator.isVisible(); } - async getBackButtonAriaLabel () { + /** + * Retrieves the ARIA label of the back button of the modal. + * + * @returns {Promise} A Promise that resolves to the ARIA label of the back button of the modal, or `null` if the ARIA label attribute is not found. + */ + async getBackButtonAriaLabel (): Promise { return this.backButtonLocator.getAttribute('aria-label'); } - async headingByTagExists (expectedHeadingType: string) { + /** + * Checks if a heading with the specified tag exists. + * + * @param {string} expectedHeadingType The HTML tag of the heading to check for (e.g., 'h1', 'h2', etc.). + * @returns {Promise} A Promise that resolves to `true` if a heading with the specified tag exists, and `false` otherwise. + */ + async headingByTagExists (expectedHeadingType: string): Promise { return this.headerLocator.locator(expectedHeadingType).isVisible(); } - async clickBackdrop () { + /** + * Clicks on the backdrop of the modal. + * + * @returns {Promise} A Promise that resolves once the backdrop of the modal has been successfully clicked. + */ + async clickBackdrop (): Promise { await this.componentLocator.click({ position: { x: -10, y: -10 } }); } From 5d6c33eef90dbcdf480f0051ee0fd89b3ef9f965 Mon Sep 17 00:00:00 2001 From: Xander Marjoram Date: Wed, 27 Mar 2024 16:27:03 +0000 Subject: [PATCH 2/2] chore(pie-icons-react): DSW-1801 add entry points for individual icons (#1347) * chore(pie-icons-react): DSW-1801 add entry points for individual react icons * DSW-1801: Change individual entry points to dist * Readme update --- .changeset/empty-mice-look.md | 5 +++++ packages/tools/pie-icons-react/README.md | 7 +++++++ packages/tools/pie-icons-react/package.json | 5 +++++ 3 files changed, 17 insertions(+) create mode 100644 .changeset/empty-mice-look.md diff --git a/.changeset/empty-mice-look.md b/.changeset/empty-mice-look.md new file mode 100644 index 0000000000..bb1dd89ef1 --- /dev/null +++ b/.changeset/empty-mice-look.md @@ -0,0 +1,5 @@ +--- +"@justeattakeaway/pie-icons-react": minor +--- + +[Added] - Individual entry points diff --git a/packages/tools/pie-icons-react/README.md b/packages/tools/pie-icons-react/README.md index 7c03e8b313..0cba4f38b4 100644 --- a/packages/tools/pie-icons-react/README.md +++ b/packages/tools/pie-icons-react/README.md @@ -37,6 +37,13 @@ export default function App() { } ``` +You can also import icons individually from the dist folder. Consider doing this if you are having issues with tree-shaking or the size of the icons in your bundle. + +```js +import IconAlertTriangleLarge from '@justeattakeaway/pie-icons-react/dist/IconAlertTriangleLarge'; +import IconCalendar from '@justeattakeaway/pie-icons-react/dist/IconCalendar'; +``` + #### Props Icons accept any standard attribute, except for `width` and `height` since those are set implicitly by using the `size` prop. diff --git a/packages/tools/pie-icons-react/package.json b/packages/tools/pie-icons-react/package.json index af9eeb47c2..2898541563 100644 --- a/packages/tools/pie-icons-react/package.json +++ b/packages/tools/pie-icons-react/package.json @@ -8,6 +8,11 @@ ".": { "import": "./esm/index.js", "require": "./dist/index.js" + }, + "./dist/*": { + "import": "./esm/*.js", + "require": "./dist/*.js", + "types": "./esm/icons/*.d.ts" } }, "files": [