@justeattakeaway/pie-modal 0.6.0 → 0.6.1

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
-[3:10:46 PM] @custom-elements-manifest/analyzer: Created new manifest.
+[2:38:36 PM] @custom-elements-manifest/analyzer: Created new manifest.
 react wrapper has been added!
 vite v4.3.9 building for production...
 transforming...
@@ -14,6 +14,6 @@ computing gzip size...
 27         _dialog: HTMLDialogElement;
            ~~~~~~~
 
-✓ built in 28.25s
-[vite:dts] Declaration files built in 26028ms.
+✓ built in 23.71s
+[vite:dts] Declaration files built in 21869ms.
 

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @justeattakeaway/pie-modal
 
+## 0.6.1
+
+### Patch Changes
+
+- [Changed] - Updated defs to use different array type syntax ([#566](https://github.com/justeattakeaway/pie/pull/566)) by [@ashleynolan](https://github.com/ashleynolan)
+
 ## 0.6.0
 
 ### Minor Changes

package/README.md

@@ -17,65 +17,92 @@
 
 # pie-modal
 
-This modal is a Web Component built using Lit.
+`pie-modal` is a Web Component built using the Lit library. It offers a simple and accessible modal component for web applications, which uses the native HTML `dialog` element under the hood.
+
+This component can be easily integrated into various frontend frameworks and customized through a set of properties.
 
 ## Local development
 
-Install dependencies at the root
-```
+Install the dependencies. Note that this, and the following commands below, should be run from the **root of the monorepo**:
+
+```bash
 yarn
 ```
 
-Navigate to this folder, compile with TypeScript and build with Vite
-```
-cd packages/components/pie-modal
-yarn build
-```
+To build the `pie-modal` package, run the following command:
 
-Compile and watch for changes (auto-compiles `dist` on save)
+```bash
+yarn build --filter=pie-modal
 ```
-yarn watch
+
+If you'd like to develop using the component storybook, then you should build the component in `watch` mode, and run storybook in a separate terminal tab:
+
+```bash
+yarn watch --filter=pie-modal
+
+# in a separate terminal tab, run
+yarn dev --filter=pie-storybook
 ```
 
 ### Importing the component
 
-```javascript
+```js
 // default
-import { PieModal } from '@justeattakeaway/pie-button';
+import { PieModal } from '@justeattakeaway/pie-modal';
 
 // react
-import { PieModal } from '@justeattakeaway/pie-button/dist/react';
+import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
 ```
 
 ## Props
 
-| Property | Type      | Default | Description                                     |
-|----------|-----------|---------|-------------------------------------------------|
-| isOpen   | `Boolean` | `false` | Controls if the modal element is open or closed |
-| heading*   | `String` | - | Sets the heading of the modal |
-| headingLevel   | `String` | `h2` | Allows you to set the heading tag (from `h1` to `h6`) |
+| Property       | Type      | Default | Description                                           |
+|----------------|-----------|---------|-------------------------------------------------------|
+| isOpen         | `Boolean` | `false` | Controls if the modal element is open or closed       |
+| heading*       | `String`  | -       | Sets the heading of the modal                         |
+| headingLevel   | `String`  | `h2`    | Allows you to set the heading tag (from `h1` to `h6`) |
+
 
+In your markup or JSX, you can then use these to set the properties for the `pie-modal` component:
+
+```html
+<!-- Native HTML -->
+<pie-modal heading='My Awesome Heading' headingLevel='h3'>Click me!</pie-modal>
+
+<!-- JSX -->
+<PieModal heading='My Awesome Heading' headingLevel='h3'>Click me!</PieModal>
+```
 
 ## Testing
 
-### Visual tests
+### Browser tests
+
+To run the browser tests, run the following command from the root of the monorepo:
 
-Run at the root of the monorepo:
+```bash
+yarn test:browsers --filter=pie-modal
 ```
+
+### Visual tests
+
+To run the visual regression tests, run the following command from the root of the monorepo:
+
+```bash
 yarn test:visual --filter=pie-modal
 ```
 
 Note: To run these locally, you will need to ensure that any environment variables required are set up on your machine to mirror those on CI (such as Percy tokens). How you achieve this will differ between operating systems.
 
-### Setup via bash:
+#### Setup via bash
 
-```
+```bash
 export PERCY_TOKEN_PIE_MODAL=abcde
 ```
 
-### Setup via package.json:
+#### Setup via package.json
 
 Under scripts `test:visual` replace the environment variable with the below:
 
-```
+```bash
 PERCY_TOKEN_PIE_MODAL=abcde
+```

package/dist/types/packages/components/pie-modal/src/defs.d.ts

@@ -17,7 +17,7 @@ export interface ModalProps {
 /**
  * Modal heading levels/tags
  */
-export declare const headingLevels: ModalProps['headingLevel'][];
+export declare const headingLevels: Array<ModalProps['headingLevel']>;
 /**
  * Event name for when the modal is closed.
  *

package/dist/types/packages/components/pie-modal/src/defs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,UAAU,CAAC,cAAc,CAAC,EAAyC,CAAC;AAEhG;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC"}
+{"version":3,"file":"defs.d.ts","sourceRoot":"","sources":["../../../src/defs.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,UAAU;IACvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,YAAY,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACtD;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,CAAwC,CAAC;AAErG;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,oBAAoB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@justeattakeaway/pie-modal",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "PIE design system modal built using web components",
   "type": "module",
   "main": "dist/index.js",

package/src/defs.ts

@@ -18,7 +18,7 @@ export interface ModalProps {
 /**
  * Modal heading levels/tags
  */
-export const headingLevels: ModalProps['headingLevel'][] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+export const headingLevels: Array<ModalProps['headingLevel']> = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 
 /**
  * Event name for when the modal is closed.