@justeattakeaway/pie-modal 0.13.0 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/.turbo/turbo-build.log +4 -4
  2. package/CHANGELOG.md +12 -0
  3. package/README.md +12 -10
  4. package/dist/index.js +193 -167
  5. package/dist/types/packages/components/pie-modal/src/defs.d.ts +21 -0
  6. package/dist/types/packages/components/pie-modal/src/defs.d.ts.map +1 -1
  7. package/dist/types/packages/components/pie-modal/src/index.d.ts +17 -0
  8. package/dist/types/packages/components/pie-modal/src/index.d.ts.map +1 -1
  9. package/package.json +1 -1
  10. package/src/defs.ts +28 -0
  11. package/src/index.ts +45 -7
  12. package/src/modal.scss +63 -17
  13. package/test/component/pie-modal.spec.ts +110 -12
  14. package/test/helpers/index.ts +2 -0
  15. package/test/visual/pie-modal.spec.ts +191 -74
package/.turbo/turbo-build.log CHANGED
@@ -1,14 +1,14 @@
1
- [7:14:15 AM] @custom-elements-manifest/analyzer: Created new manifest.
1
+ [9:56:38 AM] @custom-elements-manifest/analyzer: Created new manifest.
2
2
  react wrapper has been added!
3
3
  vite v4.3.9 building for production...
4
4
  transforming...
5
5
  ✓ 27 modules transformed.
6
6
  rendering chunks...
7
7
  computing gzip size...
8
- dist/index.js 18.85 kB │ gzip: 5.33 kB
8
+ dist/index.js 20.62 kB │ gzip: 5.72 kB
9
9
  dist/react.js 59.27 kB │ gzip: 15.99 kB
10
10
  
11
11
  [vite:dts] Start generate declaration files...
12
- ✓ built in 11.11s
13
- [vite:dts] Declaration files built in 9971ms.
12
+ ✓ built in 12.68s
13
+ [vite:dts] Declaration files built in 11549ms.
14
14
  
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @justeattakeaway/pie-modal
2
2
 
3
+ ## 0.14.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [Added] - `position` prop to modal ([#630](https://github.com/justeattakeaway/pie/pull/630)) by [@jamieomaguire](https://github.com/jamieomaguire)
8
+
9
+ - [Changed] - Sync modal header styles with figma ([#627](https://github.com/justeattakeaway/pie/pull/627)) by [@jamieomaguire](https://github.com/jamieomaguire)
10
+
11
+ - [Added] - prop for `leadingAction` to pie-modal ([#632](https://github.com/justeattakeaway/pie/pull/632)) by [@kevinrodrigues](https://github.com/kevinrodrigues)
12
+
13
+ - [Changed] - Moved some tests from Visual to Component ([#613](https://github.com/justeattakeaway/pie/pull/613)) by [@JoshuaNg2332](https://github.com/JoshuaNg2332)
14
+
3
15
  ## 0.13.0
4
16
 
5
17
  ### Minor Changes
package/README.md CHANGED
@@ -61,17 +61,19 @@ import { PieModal } from '@justeattakeaway/pie-modal/dist/react';
61
61
  |---|---|---|---|
62
62
  | headingLevel | `String` | `h2` | |
63
63
 
64
- | Property | Type | Default | Description |
64
+ | Property | Type | Default | Description |
65
65
  |---|---|---|---|
66
- | heading | `String` | n/a (Required) | The heading text of the modal |
67
- | headingLevel | `String` | `h2` | The HTML tag to use for the modal's heading (can be `h1`-`h6`) |
68
- | isDismissible | `Boolean` | `false` | If true, the modal includes a close button and can be dismissed by clicking on the backdrop or pressing the Esc key |
69
- | hasBackButton | `Boolean` | `false` | If true, the modal includes a back button which closes the modal when clicked |
70
- | isFullWidthBelowMid | `Boolean` | `false` | If true and the page is narrower than the mid breakpoint, a **medium-sized** modal will take up the full width of the screen. |
71
- | isOpen | `Boolean` | `false` | Controls if the modal element is open or closed |
72
- | isLoading | `Boolean` | `false` | When true, displays a loading spinner in the modal |
73
- | size | `String` | `medium` | Determines the maximum width of the modal. Large modals will expand to fill the entire page width at narrow viewports. Can be `small`, `medium` or `large`. |
74
- | returnFocusAfterCloseSelector | `String` | `undefined` | If provided, focus will be sent to the first element that matches this selector when the modal is closed. If not provided, the `dialog` element will return focus to the element that opened the modal. |
66
+ | heading | `String` | n/a (Required) | The heading text of the modal |
67
+ | headingLevel | `String` | `h2` | The HTML tag to use for the modal's heading (can be `h1`-`h6`) |
68
+ | isDismissible | `Boolean` | `false` | If true, the modal includes a close button and can be dismissed by clicking on the backdrop or pressing the Esc key |
69
+ | hasBackButton | `Boolean` | `false` | If true, the modal includes a back button which closes the modal when clicked |
70
+ | isFullWidthBelowMid | `Boolean` | `false` | If true and the page is narrower than the mid breakpoint, a **medium-sized** modal will take up the full width of the screen. |
71
+ | isOpen | `Boolean` | `false` | Controls if the modal element is open or closed |
72
+ | isLoading | `Boolean` | `false` | When true, displays a loading spinner in the modal |
73
+ | size | `String` | `medium` | Determines the maximum width of the modal. Large modals will expand to fill the entire page width at narrow viewports. Can be `small`, `medium` or `large`. |
74
+ | position | `String` | `center` | The position of the modal; this controls where it will appear on the page. Can be `top` or `center`. |
75
+ | returnFocusAfterCloseSelector | `String` | `undefined` | If provided, focus will be sent to the first element that matches this selector when the modal is closed. If not provided, the `dialog` element will return focus to the element that opened the modal. |
76
+ | leadingAction | `Object` | `undefined` | An object representing the leading action of the modal. It has the following properties:<br>- text (required): The text to display on the leading action button.<br>- variant: The variant of the leading action button. Please see [pie-button](https://github.com/justeattakeaway/pie/blob/main/packages/components/pie-button/README.md#props) for options. Defaults to primary if not provided.<br>- ariaLabel: The ARIA label for the leading action button. Example: `leadingAction = { text: "Example Text", variant: "secondary", ariaLabel: "Example Aria Label" }` |
75
77
 
76
78
  In your markup or JSX, you can then use these to set the properties for the `pie-modal` component:
77
79